1

我已经在我的文件中包含了一个标题，如包含。标题中是导航栏。

我如何使用 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>
4

7 回答 7

3

更紧凑的方式：

$(function(){
    var sPath = window.location.pathname;
    var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
    $('a[href="'+ sPage +'"]').parent().addClass('active');
});
于 2013-01-18T23:04:07.957 回答
3

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

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

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

var path = window.location.pathname.substring(1);
$('.nav>li>a[href="' + path + '"]').parent().addClass('active');
于 2013-01-18T23:05:09.593 回答
3

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

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

或者

您也可以使用 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');
        }
});

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

在此处查看演示：演示

于 2013-01-18T23:06:29.380 回答
1

你可以这样做：

//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');
于 2013-01-18T23:12:02.990 回答
0

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

于 2013-01-18T23:13:19.620 回答
0

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

(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);
于 2017-07-12T16:37:37.343 回答
0

如果有人仍然在谷歌上查看如何操作，这是我的解决方案

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>
于 2019-05-04T02:48:32.290 回答