Toggle css class using Jquery

Question

I have a standard ul-based CSS navigation menu. I'm trying to use Jquery to toggle the active menu css class name. However, I'm encountering two issues:

The window.location.href never equals any of my anchor hrefs. I switched to pathname, but they still do not match each other. Even though in the debugger they appear to.
I cannot seem to get the li from it's anchor.prev. I need to change the class name on the li.

Here's the html:

<div id="left-content">
  <ul>
    <li class="separator">Main
      <ul>
        <li class="active link"><a href="/main1" onclick="toggle_active_menu();">Main 1</a></li>
        <li class="link"><a href="/main2" onclick="toggle_active_menu();">Main 2</a></li>
        <li class="link"><a href="/main3" onclick="toggle_active_menu();">Main 3</a></li>
      </ul>
    </li>
    <li class="separator">Tools
      <ul>
        <li class="link"><a href="/tools1" onclick="toggle_active_menu();">Tools 1</a></li>
      </ul>
    </li>
  </ul>
</div>

When an anchor is clicked, it's corresponding li should have "active link" as the class name. And all other li's should be reset to just "link" as the class name.

Here's the Jquery javascript:

function toggle_active_menu() {
    $('#left-content a').each(function() {
        /*var isActive = $(this).attr('href') == window.location.href;*/
        var active = this.pathname == window.location.pathname;
        var prev = this.prev();
        alert("active: " + active + "\nthis.pathname: " + this.pathname + "\nwindow.location.pathname: " + window.location.pathname + "\nprev: " + prev);
        prev.toggleClass('active', active);
    });
}

I put the alert in there to help debug. As I mentioned, the clicked anchor's href (or pathname) never matched the window's location href (or pathname). And prev is always undefined instead of being the li of the anchor.

Eventual Answer

After testing the various answers, I fould that I had to remove the onclick calls and call the toggle_active_menu function in the document ready function instead. The window location was not being updated before onclick was being called. Also, I did not use toggleClass so that I could preserve the order of the class names.

function toggle_active_menu() {
    $('#left-content ul li ul li a').each(function() {
        var pathname = window.location.pathname == '/' ? '/main1' : window.location.pathname;
        var active = pathname.indexOf(this.pathname) != -1;
        if (active) {
            $(this).parent().attr('class', 'active link');
        } else {
            $(this).parent().attr('class', 'link');
        }
    });
}

ShankarSangoli · Accepted Answer · 2012-01-24 15:20:52Z

4

To get the li which is the parent of a element use parent method and toggleClass take only the calss to toggle. To compare the href of the anchor with window.location.href you can use indexOf method.

function toggle_active_menu() {
    $('#left-content a').each(function() {
        var isActive = (window.location.href.toLowerCase().indexOf($(this).attr('href')) != -1);
        $(this).parent().toggleClass('active');
        alert("active: " + isActive);
    });
}

edited Jan 24, 2012 at 15:20

answered Jan 24, 2012 at 14:56

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

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

Comments

Brent Anderson · Accepted Answer · 2012-01-24 14:53:15Z

0

Simplified version for you.

$('.link').click(function(){
    $('.link').removeClass('active');
    $(this).addClass('active');
})

answered Jan 24, 2012 at 14:53

Brent Anderson

9664 silver badges6 bronze badges

Comments

eiu165 · Accepted Answer · 2012-01-24 14:55:46Z

0

toggleClass only takes one paramater it should be

prev.toggleClass('active');

answered Jan 24, 2012 at 14:55

eiu165

6,30110 gold badges44 silver badges62 bronze badges

Comments

csharpnumpty · Accepted Answer · 2012-01-24 15:00:50Z

0

To fix getting a handle on the correct LI to toggle the class, try

var prev = $(this).parent();

For the pathname, try using $(this).attr("href") and matching it against window.location.href, or checking if it's contained within window.location.href

edited Jan 24, 2012 at 15:00

answered Jan 24, 2012 at 14:53

csharpnumpty

3,7231 gold badge33 silver badges46 bronze badges

Collectives™ on Stack Overflow

Toggle css class using Jquery

Eventual Answer

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Eventual Answer

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related