I am kind of confused why my code doesn't work correctly, I hope You will tell me what I've done wrong. I want to highlight navigation tab while clicked.
HTML:
<header class="mainheader">
<!-- Obrazek tutaj-->
<nav>
<ul>
<li><a id="a-home" onclick="dodajAktywne(this)" href="index.html">Home</a></li>
<li><a id="a-omnie" onclick="dodajAktywne(this)" href="omnie.html">O mnie</a></li>
<li><a id="a-kurs" onclick="dodajAktywne(this)" href="kurs.html">Kurs</a></li>
<li><a id="a-kontakt" onclick="dodajAktywne(this)" href="kontakt.html">Kontakt</a></li>
</ul>
</nav>
</header>
JavaScript:
function dodajAktywne(elem) {
var a = document.getElementsByTagName('a')
for (i = 0; i < a.length; i++) {
a[i].classList.remove('active');
}
elem.classList.add('active');
}
CSS:
.active {
color: blue;
background-color: #cf5c3f;
}
To add a class on click of anchor tag, we use addClass() method. The addClass() method is used to add more property to each selected element. It can also be used to change the property of the selected element.
Classes (i.e. classnames) are used for styling the button element. Multiple classnames are separated by a space. JavaScript uses classes to access elements by classname. Tip: class is a global attribute that can be applied to any HTML element.
add() method: This method is used to add a class name to the selected element. Syntax: element. classList.
The addClass() method adds one or more class names to the selected elements. This method does not remove existing class attributes, it only adds one or more class names to the class attribute. Tip: To add more than one class, separate the class names with spaces.
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/
You can simplify your JavaScript to:
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
:
a:focus {
color: blue;
background-color: #cf5c3f;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With