CODEWITHSUNDEEP
jqueryclasshtml-liststogglehref
Kris Douglas
Kris Douglas

Reputation: 135

Toggle parent element's class jQuery based on HREF value

As you may tell I am learning jQuery today (amongst other web stuff).

I am trying to neatly change the class of an LI to active when a variable I have matches the contents of the HREF on an A within the LI.

It is structured as follows:

<li><a href="foo.html">Foo</a></li>

When my "page" variable is equal to "foo.html" I want to change the class of the li to active. As follows:

<li class="active"><a href="foo.html">Foo</a></li>

I know there is a moderately simple way of doing it, but the way I am doing it seems to be entirely wrong!

Just as a side note, it is worth bearing in mind (as this is where I have fallen over) that this is a menu, and there are numerous LIs e.g:

<li class="active"><a href="foo.html">Foo</a></li>
<li><a href="bar.html">Bar</a></li>

Many thanks, Kris

Upvotes: 3

Views: 770

Answers (3)

musefan
musefan

Reputation: 48425

Step 1: Getting the correct link element

First you need to locate the correct a tag element, you can do that with the following attribute selector:

var href = "foo.html";
var a = $("[href='" + href + "']");

Step 2: Getting the parent list item element

Then you can find the direct parent using the parent() function:

var li = a.parent();

If it is not a direct parent, you can use the closest() function which will allow you to find the first ancestor that matches the supplied selector. For example:

var li = a.closest("li");

Step 3: Changing the class

Finally, you can add a class to any given element using the addClass() function:

li.addClass("active");

if you need to remove the class at any point, or remove an existing class, you can use the removeClass() function:

li.removeClass("active");

NOTE: If you want to 'reset' all active list elements, you can easily do the following:

$("li.active").removeClass("active");

The end result

Here is a working example in action

Upvotes: 2

Derek Henderson
Derek Henderson

Reputation: 9706

Although you didn't specify it in your question, I assume you'll want to remove the active class from other LIs?

var li = $('.menuClass li'), // menuClass is whatever the class of your menu is (or #menuId for id)
    page = 'foo.html';

li.each(function () {
    var t = $(this); // better performance
    t.removeClass('active'); // remove active class from all
    if (t.find('a').attr('href') === page) { // if the href equals the value of your page variable, add active class
        t.addClass('active');
    }
});

Upvotes: 0

Brian Salta
Brian Salta

Reputation: 1576

This should work:

$('a[href="foo.html"]').closest("li").addClass("active");

To work with your page variable:

$('a[href="' + hrefVariable + '"]').closest("li").addClass("active");

EDIT:

To explain how this works:

  • The first section, $('a[href="foo.html"]') will locate any and all links on the page with the href value of foo.html.
  • The second object, .closest("li") will locate the closest li from the element found in the first section.
  • The third object adds the class to the preceding element, in this case the li.

Upvotes: 5

Related Questions