JavaScript onClick addClass
You can simplify your JavaScript to:
Fiddle
function dodajAktywne(elem) {
// get all 'a' elements
var a = document.getElementsByTagName('a');
// loop through all 'a' elements
for (i = 0; i < a.length; i++) {
// Remove the class 'active' if it exists
a[i].classList.remove('active')
}
// add 'active' classs to the element that was clicked
elem.classList.add('active');
}
If you pass the parameter this
in your HTML to:
<header class="mainheader">
<!-- Obrazek tutaj-->
<nav>
<ul>
<li><a id="a-home" onclick="dodajAktywne(this)" href="#">Home</a>
</li>
<li><a id="a-omnie" onclick="dodajAktywne(this)" href="#">O mnie</a>
</li>
<li><a id="a-kurs" onclick="dodajAktywne(this)" href="#">Kurs</a>
</li>
<li><a id="a-kontakt" onclick="dodajAktywne(this)" href="#">Kontakt</a>
</li>
</ul>
</nav>
</header>
Note: I've changed href
attribute to #
, you will have to change it back to your .html
pages
Alternatively, you can do this without JavaScript, using CSS's :focus
:
Fiddle
a:focus {
color: blue;
background-color: #cf5c3f;
}
This code will highlight the navigation tab without needing to include onclick in the HTML, though it doesn't remove the background color if another tab is clicked.
document.onclick = function(event) {
var target = event.target || event.srcElement;
target.style.background = '#cf5c3f';
};
https://codepen.io/mdmcginn/pen/BwrNaj/