jQuery, highlight active menu item

jquery menu navigation sprite highlight

18,791

Solution 1

You forgot to add the jQuery library in your Fiddle
and to properly close your function with });

$("nav li").click(function ( e ) {
    e.preventDefault();
    $("nav li a.active").removeClass("active"); //Remove any "active" class  
    $("a", this).addClass("active"); //Add "active" class to selected tab  

    // $(activeTab).show(); //Fade in the active content  
});

Also this article might be interesting: Stop Misusing Return False
Here's a quick look at the DOCS: event.preventDefault

Solution 2

You could also highlight navigation based on the current url with regards to your navigation href value. This way is more effective in case of redirects and when you jump directly on to the home page. Consider this example:

$(document).ready(function($) {
    function markNavActive(){
        var filename = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
        var listLinks = $('nav a');

        listLinks.each(function() {
            if ($(this).attr('href') == filename) {
                // alert(filename);
                $(this).addClass('active');
                return;
            }
            if (filename == "") {
                // alert(filename);
                $('.nav a[href="index.php"]').addClass('active');
                return;
            }
        });
    }
    markNavActive();    
});

18,791

Author by

Very Curious

Updated on June 04, 2022

Comments

Very Curious almost 2 years

I am trying to make jQuery for my navigation to highlight the active menu item (my menu is made using sprites btw.) Manually adding the class="active" to one of the menu item, the highlighting works. But using my jQuery code, nothing happens...

Any ideas how to solve this?

Here is a demo fiddle of the problem. http://jsfiddle.net/wvEBw/1/

HTML:

<nav>
    <ul>
        <li><a href="#" id="btn1"></a></li>
        <li><a href="#" id="btn2" class="active"></a></li>
    </ul>
</nav>

CSS: (animated sprite)

//...

/* sprite menu animations */

nav a#btn1 {
    background-position:0px 0px;
    width:82px;
}

nav a#btn1:hover {
    background-position:0px -82px;
}

nav a#btn1.active {
    background-position:0px -164px;
}

nav a#btn2 {
    background-position:-108px 0px;
    width:82px;
}

nav a#btn2:hover {
    background-position:-108px -82px;
}

nav a#btn2.active {
    background-position:-108px -164px;
    outline: none;
}

jQuery:

$("nav li").click(function() {
    $("nav li a.active").removeClass("active"); //Remove any "active" class  
    $("a", this).addClass("active"); //Add "active" class to selected tab  

    $(activeTab).show(); //Fade in the active content  
    return false;
}

Very Curious over 10 years

Hi, thanks you for your solution. The thing is, that it still doesn't work in my project. I have added this library <script src="js/jquery-1.10.2.min.js"></script> in the <head> of my page and the jQuery script is in diffenent file, also called from the head. Any tips where the problem might be?
Very Curious over 10 years

I found the problem! Had to wrapp the function in this $(document).ready(function() { });. Now it's working! Thank you for ur help!
Roko C. Buljan over 10 years

@Tiii thx, yes, always always make sure the DOM is read before writing code :)