javascript - dynamically apply active class to nav li - Stack Overflow

admin管理员组

文章数量:1339463

I have included a header to my files as in include. In the header is the nav bar.

How do I, using jQuery, apply class="active" to the relevant li.

The only way I could think of doing it is to set a variable on the actual pages, apply an id that is equal to that variable of the relevant page and if function so if they match apply a class to the li.

However, I thought there must be a simpler way of achieving this.

<ul class="nav nav-pills right" id="div">
    <li id="home" class="active">
       <a href="index.php">Home</a>
    </li>
    <li id="search">
       <a href="search.php">Search</a>
    </li>
    <li id="contact">
      <a href="contact.php">Contact</a>
    </li>
</ul>

I have included a header to my files as in include. In the header is the nav bar.

How do I, using jQuery, apply class="active" to the relevant li.

The only way I could think of doing it is to set a variable on the actual pages, apply an id that is equal to that variable of the relevant page and if function so if they match apply a class to the li.

However, I thought there must be a simpler way of achieving this.

<ul class="nav nav-pills right" id="div">
    <li id="home" class="active">
       <a href="index.php">Home</a>
    </li>
    <li id="search">
       <a href="search.php">Search</a>
    </li>
    <li id="contact">
      <a href="contact.php">Contact</a>
    </li>
</ul>

• javascript
• jquery
• html
• css
• nav

Share Improve this question Follow edited Jan 20, 2013 at 17:44 Paul Fleming 24.5k88 gold badges7878 silver badges113113 bronze badges asked Jan 18, 2013 at 22:59 RSMRSM 15.1k3636 gold badges9999 silver badges145145 bronze badges 2

• I'm guessing this html is generated server side, and you are wanting to set the active nav element from within a template of some sort. You pretty much have the idea of how to do it already. – Chad Commented Jan 18, 2013 at 23:02
• check my answer below, works in all cases regardless of if you have "#data" or "?data=test" at the end of your url.. – insomiac Commented Jan 18, 2013 at 23:17

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 4

An easy way to do this would be to have a script per page:

$('#home').addClass('active'); // for home page

You could try and match the href to the current url:

var path = window.location.pathname.substring(1);
$('.nav>li>a[href="' + path + '"]').parent().addClass('active');

More pact way:

$(function(){
    var sPath = window.location.pathname;
    var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
    $('a[href="'+ sPage +'"]').parent().addClass('active');
});

As soon as the page loads it will run this code:

$(document).ready(function(){
    $('li').removeClass('active');
    $('li a').each(function() {
       $found = $.contains($(this).prop("href"),location.pathname);
       if ($found) {
           $(this).closest('li').addClass('active');
           break;
        }
    });
});

OR

You can also do this using regex :

$(document).ready(function(){
    $('li').removeClass('active');
     var regex = /[a-z]+.php/g; 
     var input = location.pathname; 
        if(regex.test(input)) {
           var matches = input.match(regex);
           $('a[href="'+matches[0]+'"]').closest('li').addClass('active');
        }
});

You might need to have the similar id name to that of php file.

Check the demo here : Demo

You can do this:

//remove the active class from all items, if there is any
$('.nav>li').removeClass('active');

//finally, add the active class to the current item
$('a[href='+ location.pathname.substring(1) +']').parent().addClass('active');

You could use javascript to find the current list item based on the url, by adding the class to the right list item after the DOM has been loaded (e.g. string manipulation of window.location together with JQuery selectors and addClass())

I found a routine to set active (current) class on my shared menu, but I need to modify it to set the parent link only, and not the 'closest' link. It works great on menu items with no sub menus, but when a sub menu item is clicked, there is not indication on the main menu after page load. (the code I need to modify is below)

(function( $ ) { $.fn.activeNavigation = function(selector) { var pathname = window.location.pathname var extension_position; var href; var hrefs = [] $(selector).find("a").each(function(){ // Remove href file extension extension_position = $(this).attr("href").lastIndexOf('.'); href = (extension_position >= 0) ? $(this).attr("href").substr(0, extension_position) : $(this).attr("href");

        if (pathname.indexOf(href) > -1) {
            hrefs.push($(this));
        }
    })
    if (hrefs.length) {
        hrefs.sort(function(a,b){
            return b.attr("href").length - a.attr("href").length
        })
      hrefs[0].closest('li').addClass("current")
    }
}; })(jQuery);

If someone still checks on google how to do it here is my solution

var path = window.location.href; // full url 
$('a[href="'+ path +'"]').parent().addClass('active'); // find by selector url

HTML

<ul class="navbar-nav mr-auto">
    <li class="nav-item">
        <a class="nav-link" href="http://example./">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="http://example./history"> History</a>
    </li>
</ul>

本文标签： javascriptdynamically apply active class to nav liStack Overflow