How to add class="active" to li menu bar with Javascript [duplicate]

Question

I have the following problem: I would like to add class="active" to the li matching the webpage I'm surfing on using javascript (I use jQuery library). I can't figure out how to do that, though I tried many examples found here and on other sites. So here is my html:

<header>
  <div id="menu" class="clearfix">
    <nav class="navigation">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="blabla.html">Bla</a></li>
        <li><a href="blablabla.html">Blablabla</a></li>
        <li><a href="blaX4.html">Tools</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

Thank you very much! Any answer will be appreciated!

I hope this would be able to help you :) stackoverflow.com/questions/3566838/jquery-addclass-onclick — Uzair Hayat
– Uzair Hayat, Commented Jul 29, 2014 at 14:02

Youness · Accepted Answer · 2014-07-29 14:03:03Z

0

this should works just fine :)

   $(document).ready(function () {
            var url = window.location;
    $('.navigation ul li a[href="'+url+'"]').parent().addClass('active');
    });

answered Jul 29, 2014 at 14:03

Youness

1,4951 gold badge9 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add class="active" to li menu bar with Javascript [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related