This commit is contained in:
Joost van der Schee 2022-12-08 15:43:53 +01:00
parent 2cfb9f1c45
commit 3c90b13825
2 changed files with 17 additions and 0 deletions

View File

@ -76,8 +76,24 @@
</footer> </footer>
<script type="text/javascript"> <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 */ /* Make sure a hash is loaded */
if (window.location.hash == '') window.location.href = '#home'; if (window.location.hash == '') window.location.href = '#home';
setActiveLink(window.location.hash);
</script> </script>
</body> </body>

View File

@ -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 {top: 0; padding: 0 3rem 0; height: 14rem; display: flex; flex-direction: column; justify-content: center;}
header h1 {margin: 0 0 0.5rem;} header h1 {margin: 0 0 0.5rem;}
header nav a {border-bottom: 1px solid transparent;} header nav a {border-bottom: 1px solid transparent;}
header nav a.active,
header nav a:hover {border-color: #3a3731;} header nav a:hover {border-color: #3a3731;}
footer {padding: 0 3rem 3.5rem; transform: translate(-50%, -100%); font-style: italic; font-size: 0.8rem;} footer {padding: 0 3rem 3.5rem; transform: translate(-50%, -100%); font-style: italic; font-size: 0.8rem;}
main {margin: 0 auto;} main {margin: 0 auto;}