Question

34

JavaScript onClick addClass

rated 0 times [ 36] [ 2] / answers: 1 / hits: 104543 / 10 Years ago, sun, november 16, 2014, 12:00:00

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;

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

wilson

Add To Favorites

Follow

Total Points: 27

Total Questions: 93

Total Answers: 93

Location: Tajikistan

Member since Sun, Aug 29, 2021

3 Years ago

wilson questions

1 Discord.js v14 how to handle button interactions

Tue, Aug 9, 22, 00:00, 2 Years ago

1 Post Request net::ERR_CONNECTION_REFUSED

Wed, May 11, 22, 00:00, 2 Years ago

1 I can't use the apploading on my react native. It wont work properly

Sat, Dec 12, 20, 00:00, 3 Years ago

1 Should I use useRef for storing one-time initialised data?

Wed, May 20, 20, 00:00, 4 Years ago

1 Overwriting an existing command with Cypress

Wed, May 13, 20, 00:00, 4 Years ago

View All

answered 10 Years ago brandon · Accepted Answer

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;

}