如何根据每个页面中的 URL 将活动类添加到导航菜单答案

【问题标题】：How to Add Active Class to a Navigation Menu Based on URL in each page如何根据每个页面中的 URL 将活动类添加到导航菜单
【发布时间】：2016-01-26 07:42:54
【问题描述】：

我的网站顶部有一个导航菜单。其中包含许多具有不同 url 的页面。如何根据每个页面中以特定颜色显示的 URL 将活动类添加到导航菜单？

<ul>
<li class="red"><a href="home">HOme</a></li>
<li><a href="gallery">gallery</a></li>
<li><a href="about">about</a></li>
<li><a href="contact">contact</a></li>
</ul>

【问题讨论】：

使用.addClass("active); 将名为active 的类添加到点击的链接中。
你在使用 jQuery 吗？

标签： javascript jquery html css

【解决方案1】：

这个sn-p会很有用

HTML

<ul id="menuList">
<li><a href="home">Home</a></li>
<li><a href="gallery">gallery</a></li>
<li><a href="about">about</a></li>
<li><a href="contact">contact</a></li>
</ul>

$('#menuList li').click(function(e){
 e.preventDefault(); //Remove this in your main code
    $('#menuList li').removeClass("active");
    $(this).addClass("active");
});

CSS

.active{
    background-color:green;
}

WORKING EXAMPLE

【讨论】：

【解决方案2】：

给ul 一个类或ID。然后，假设 jQuery 和一个 ID 为nav:

$(function() {
    $('#nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
});

那么你所需要的就是设置.active 类的样式。此外，这假设您的链接是/my-page，因此如果您当前位于my-page，则链接将变为.active。

【讨论】：