根据页面 URL 更新类属性答案

【问题标题】：Update class attribute based on page URL根据页面 URL 更新类属性
【发布时间】：2013-07-10 16:53:19
【问题描述】：

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

<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" 代码，而是使用一个脚本来尝试这个，该脚本会根据锚点是否是当前 URL 自动将类插入到 li 标记中。

有人知道我该如何开始吗？

【问题讨论】：

这通常使用服务器端脚本完成，但如果需要，您可以使用正则表达式匹配来解析 window.location.pathname
当您从服务器发送页面时，您将类名设置为当前项目，或者您可以设置 cookie 并使用 javascript 读取它们并使用 active 类设置该元素

标签： javascript jquery ajax css

【解决方案1】：

你可以从

获取当前的url路径名

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

希望对你有帮助

【讨论】：

【解决方案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>
   }
});

【讨论】：