Question

我有这个代码，其中活动菜单项与其他菜单项具有不同的样式：

<div class="menu">
<li class="active"><a href="item1.php">Item 1</a></li>
<li><a href="item2.php">Item 2</a></li>
<li><a href="item3.php">Item 3</a></li>
</div>

我不想手动为每个页面手动编写class =“active”，我想尝试使用一个自动将类插入li标签的脚本，基于锚是否是当前的URL。

有人知道如何开始这个吗？

Answer 1

您可以从

获取当前的网址路径名

window.location.pathname

有关详细信息，请参阅this。

一旦知道了路径名，就可以将活动类设置为正确的链接，如下所示。

$(".menu li a").each(function(){
   if(window.location.pathname == $(this).prop("href")){
        $(.menu li).removeClass("active");     
        $(this).closest("li").addClass("active");
   }
});

希望有所帮助

Answer 2

试试这段代码：

$('.menu li a').each(function(){ //check thru all <a> elements inside <li> inside .menu

  var pagename= location.pathname.split('/').pop(); // get current pages filename (just filename)

    if($(this).prop("href") == pagename){
        $('.menu li').removeClass("active"); // remove all active class    
        $(this).parent("li").addClass("active"); //put active in parent of <a> which is <li>
   }
});

根据页面URL更新类属性

2 个答案: