javascript 动态地将活动类应用到导航里

dynamically apply active class to nav li

提问by RSM

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.

我如何使用 jQuery 应用class="active"到相关的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.

我能想到的唯一方法是在实际页面上设置一个变量，应用一个等于相关页面的变量的 id，如果函数匹配，则应用一个类到 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>

回答by JohnJohnGa

More compact way:

更紧凑的方式：

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

回答by Paul Fleming

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:

您可以尝试将 href 与当前网址匹配：

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

回答by insomiac

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.

您可能需要具有与 php 文件相似的 ID 名称。

Check the demo here : Demo

在此处查看演示：演示

回答by Onur Y?ld?r?m

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');

回答by Yoggi

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())

您可以使用 javascript 根据 url 查找当前列表项，方法是在加载 DOM 后将类添加到正确的列表项中（例如，使用 JQuery 选择器和 addClass() 对 window.location 进行字符串操作）

回答by Ken

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);

(function( $ ) { $.fn.activeNavigation = function(selector) { var pathname = window.location.pathname var extension_position; var href; var hrefs = [] $(selector).find("a").each( function(){ // 删除 href 文件扩展名 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);

回答by Mehmet Ali Ku?

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

HTML

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