From 3c90b1382573dca9b3e74a2e0111b2c821457a4f Mon Sep 17 00:00:00 2001
From: Joost van der Schee <joost@vdschee.nl>
Date: Thu, 8 Dec 2022 15:43:53 +0100
Subject: [PATCH] update

---
 index.html | 16 ++++++++++++++++
 style.css  |  1 +
 2 files changed, 17 insertions(+)

diff --git a/index.html b/index.html
index 2e98dbc..5b82b84 100644
--- a/index.html
+++ b/index.html
@@ -76,8 +76,24 @@
     </footer>
     
     <script type="text/javascript">
+      /* Add eventlistener to hash links */
+      var els = document.querySelectorAll('a[href^="#"]');
+      els.forEach(function(el) {
+          el.addEventListener('click',function(e) {
+              setActiveLink(el.getAttribute('href'))
+          });
+      });
+      /* Set the actice hash/class function */
+      function setActiveLink(hash) {
+          var links = document.querySelectorAll('a[href^="#"]');
+          links.forEach(function(link) {
+              link.classList.remove('active');
+              if(link.getAttribute('href')==hash) link.classList.add('active');
+          });
+      }
       /* Make sure a hash is loaded */
       if (window.location.hash == '') window.location.href = '#home';
+      setActiveLink(window.location.hash);
     </script>
 
   </body>
diff --git a/style.css b/style.css
index 983810a..226c5d2 100644
--- a/style.css
+++ b/style.css
@@ -20,6 +20,7 @@ div.centered {max-width: 22rem; text-align: center;}
 header {top: 0; padding: 0 3rem 0; height: 14rem; display: flex; flex-direction: column; justify-content: center;}
 header h1 {margin: 0 0 0.5rem;}
 header nav a {border-bottom: 1px solid transparent;}
+header nav a.active,
 header nav a:hover {border-color: #3a3731;}
 footer {padding: 0 3rem 3.5rem; transform: translate(-50%, -100%); font-style: italic; font-size: 0.8rem;}
 main {margin: 0 auto;}