动态地将活动类应用于navli

dynamically apply active class to nav li

本文关键字：应用于 navli 活动 动态      更新时间：2023-09-26

我在include中包含了一个头文件。在头部是导航栏。

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

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

一个简单的方法是每页一个脚本:

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

你可以尝试将href匹配到当前url:

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

更紧凑的方式:

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

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

$(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名称。

在这里查看演示:demo

你可以这样做:

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

你可以使用javascript来查找基于url的当前列表项，通过在DOM加载后将类添加到正确的列表项(例如窗口的字符串操作)。

我发现了一个在共享菜单上设置活动(当前)类的例程，但我需要修改它以仅设置父链接，而不是"最接近"的链接。它在没有子菜单的菜单项上工作得很好，但是当单击子菜单项时，页面加载后主菜单上没有指示。(我需要修改的代码如下)

(function($) {.fn美元。activeNavigation = function(selector) {Var pathname = window.location.pathnamevar extension_position;var href;Var hrefs = []$(选择器);("a"). each(函数(){//删除href文件扩展名extension_position = $(this).attr("href"). lastindexof (" . ");Href = (extension_position>= 0) ?(美元).attr("href")。Substr (0, extension_position):(美元).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);

如果有人还在谷歌上查怎么做这是我的解决方案

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>
相关文章：