Question

我在include中包含了一个标题。标题是导航栏。

如何使用jQuery将class="active"应用于相关的li。

我能想到的唯一方法是在实际页面上设置一个变量，应用一个等于相关页面变量的id，如果匹配则函数如此匹配将一个类应用于li。

但是，我认为必须有一种更简单的方法来实现这一点。

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

Answer 1

一种简单的方法是每页都有一个脚本：

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

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

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

Answer 2

一旦页面加载，它将运行以下代码：

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

您也可以使用正则表达式执行此操作：

$(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');
        }
});

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

在此处查看演示：Demo

Answer 3

更紧凑的方式：

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

Answer 4

你可以这样做：

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

Answer 5

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

Answer 6

我找到了一个在我的共享菜单上设置活动（当前）类的例程，但是我需要修改它以仅设置父链接，而不是最近的＆＃39;链接。它适用于没有子菜单的菜单项，但是当单击子菜单项时，页面加载后主菜单上没有指示。（我需要修改的代码如下）

（function（$）{ $ .fn.activeNavigation = function（selector）{ var pathname = window.location.pathname var extension_position; var href; var hrefs = [] $（选择器）.find（＆＃34;＆＃34）。每一（功能（）{ //删除href文件扩展名 extension_position = $（this）.attr（＆＃34; href＆＃34;）。lastIndexOf（＆＃39;。＆＃39;）; href =（extension_position＆gt; = 0）？ $（this）.attr（＆＃34; href＆＃34;）。substr（0，extension_position）： $（本）.attr（＆＃34; HREF＆＃34）;
        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);

Answer 7

如果有人仍然在Google上检查该怎么做，这是我的解决方法

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.com/">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="http://example.com/history"> History</a>
    </li>
</ul>

动态应用活动类到nav li

7 个答案: