如何使用jQuery和JavaScript将类添加到元素？

Question

I have the HTML code as given below to add the navigation to my site. (Note that the list is nested)

<div id="navigation">
       <ul>
        <li><a href="default.html">Home</a></li>
        <li><a href="about.html">About us</a></li>
        <li><a href="help.html">Help</a></li>
        <li><a href="#">DropDown</a>
          <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
          </ul>
        </li>
        <li class="last"><a href="#">A Last Link Text</a></li>
      </ul>
</div>

I want to show the currently active page link in new color. So the corresponding list item should have the class active and I use the CSS to change the color. For example, if the default.html is the currently opened page, the code should be <li class=“active”><a href="default.html">Home</a></li> .

How to do that in jQuery and JavaScript (I need both for two different websites). Can anyone help me?

Thanks for your help.

Answer 1

Get your URL / Parse it:

var pathname = window.location.pathname;

Then add the class:

Jquery:

$(element).addClass('classname');

JS: How do I add a class to a given element?

Answer 2

Try this

$(document).ready(function () {
    var url = location.href;
    $('#navigation li a').each(function () {
        var thisHref = this.getAttribute('href');
        if (thisHref !== '#' && url.indexOf(thisHref) !== -1) {
            $(this.parentNode).addClass('active');
            return;
        }
    });
});