Browse Source

ancre et js click on link

Bachir Soussi Chiadmi 5 months ago
parent
commit
45c6288d64
3 changed files with 48 additions and 0 deletions
  1. 10 0
      ancres/assets/css/styles.css
  2. 16 0
      ancres/assets/js/main.js
  3. 22 0
      ancres/index.html

+ 10 - 0
ancres/assets/css/styles.css

@@ -0,0 +1,10 @@
+
+.nimp{
+  height:900px;
+  background-color: green;
+}
+
+#ancre{
+  height:900px;
+  background-color: red;
+}

+ 16 - 0
ancres/assets/js/main.js

@@ -0,0 +1,16 @@
+console.log("Hello");
+
+
+var lien = document.querySelectorAll('a[href="#ancre"]')[0];
+console.log('lien', lien);
+
+
+lien.addEventListener('click', onClickSurLien);
+
+function onClickSurLien(event){
+  event.preventDefault();
+
+  console.log('event', event);
+
+  return false;
+}

+ 22 - 0
ancres/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>Les Ancres</title>
+    <link rel="stylesheet" href="assets/css/styles.css">
+  </head>
+  <body>
+
+    <a href="#ancre">Lien vers ancre</a>
+
+    <div class="nimp">
+      <h1>nimp</h1>
+    </div>
+
+    <div id="ancre">
+      <h1>Ancre</h1>
+    </div>
+
+    <script src="assets/js/main.js" charset="utf-8"></script>
+  </body>
+</html>