What I am trying to do: a regular menu which has the current active page in a different style.

HTML (working properly)

<div>
    <ul class="nav">    
        <li>
            <a class="active" href="#">
                <span>one</span>
            </a>
        </li>

        <li>
            <a href="#">
                <span>two</span>
            </a>
        </li>

        <li>
            <a href="#">
                <span>three</span>
            </a>
       </li>
    </ul>       
</div>

CSS (working properly)

.nav .active {
    color: #fff;
    background-color: #000;
}

JS (not working)

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

Codepen taken from Sara Soueidan's Codepen.

Sara Soueidan's version cannot be even replicated in codepen (targetting both the a and the li). Another version that I found was using the following JS:

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

This version appears to be working, but for some reasons that I don't understand I need to triple click the menu button in order to both use the URL and set the active class.

Can anyone shed some light into this banal matter?

What I am trying to do: a regular menu which has the current active page in a different style.

HTML (working properly)

<div>
    <ul class="nav">    
        <li>
            <a class="active" href="#">
                <span>one</span>
            </a>
        </li>

        <li>
            <a href="#">
                <span>two</span>
            </a>
        </li>

        <li>
            <a href="#">
                <span>three</span>
            </a>
       </li>
    </ul>       
</div>

CSS (working properly)

.nav .active {
    color: #fff;
    background-color: #000;
}

JS (not working)

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

Codepen taken from Sara Soueidan's Codepen.

Sara Soueidan's version cannot be even replicated in codepen (targetting both the a and the li). Another version that I found was using the following JS:

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

This version appears to be working, but for some reasons that I don't understand I need to triple click the menu button in order to both use the URL and set the active class.

Can anyone shed some light into this banal matter?

• javascript
• jquery

• can you add a demo for the problem where you need to triple click – guradio Commented Dec 22, 2016 at 10:59

2 Answers 2

Problem: is with this line $(this).addClass('active').siblings().removeClass('active');

Actually there are no siblings to the a within a li

Solution: You need to first remove the active class from a tags and then add to $(this)

$('a.active').removeClass('active');
$(this).addClass('active');

After more hours than I'd like to admit, I discovered that I didn't even need to set the active class of the 'li' when pushing the menu buttons, but I had to check if the current URL contained that part of the menu.

Therefore, I chained a quick-n-dirty if-elseif in JS:

$(document).ready(function () {
    if(window.location.href.indexOf("one") > -1) {
        $('.nav-container ul li').eq(1).addClass("active");
    } else if(window.location.href.indexOf("two") > -1) {
        $('.nav-container ul li').eq(2).addClass("active");
    } else $('.nav-container ul li').eq(0).addClass("active");
});

To test if the URL contained the string "one", I used:

window.location.href.indexOf("one") > -1

Then I targeted the specific 'li' with eq(i), where i is from 0 to n-1 menu items.

Not the best solution, but it works for a menu with under 5 items, and it also works well if the "one" menu item has some children like "one-one", "one-two" etc.