JavaScript onClick addClass

javascript html css onclick

93,569

Solution 1

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;
}

Solution 2

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/

93,569

Author by

Sheil

Updated on July 19, 2022

Comments

Sheil almost 2 years
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">
  
  <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;
}
```
- SLaks over 9 years
  
  You should pass this to pass the element itself to the function.
- Alex Char over 9 years
  
  OP code is working fiddle. I think he means when he clicks the link doesn't keep the style..
- mfeingold over 9 years
  
  Without the actual code it is difficult to tell, I assume that you plan to include your <header> tag in every page you have exactly as you have it posted. If this is so, then you problem is that as a link is clicked the page is reloaded and your changes (add class) are discarded. For the future it is best if you would provide a repro using jsfiddle or plunker
- Roko C. Buljan over 9 years
  
  @AlexChar which leads to a conclusion that i.e: omnie.html is being followed.
- Vitorino fernandes over 9 years
  
  fiddle add return false; if you dont want to redirect the page
- Roko C. Buljan over 9 years
  
  Are you being redirected to a selected page? If yes, how do you read the URI of the currently opened page?
- Sheil over 9 years
  
  Yes I am being redirected to a selected page. I don't read the URL of currently opened page which I assume is the solution. But I don't know yet how to do that :)
Sheil over 9 years

I have tried both options, none of them are working as intended. Nav buttons just lose their focus.
Weafs.py over 9 years

@user3703750 - You want the previous button to be active, even if another button is clicked?
Sheil over 9 years

None is active. When I click on another link i.e. home, I want Home button from navigation to be active and highlighted.
Sheil over 9 years

The problem is that my page is redirecting when I click on any tab from navigation. When I've stopped redirecting Your code works perfectly.
Sheil over 9 years

jsfiddle.net/pb95kv32/2 This is how I made this. Works correctly now. Thx for help, I'll vote You up :)
tatsu over 6 years

the first solution is what I'm looking for but with reactjs syntax
Dmitry over 5 years

Please add explanation to your answer.