Question

我的网站顶部有一个导航菜单。这些内容包含许多不同网址的页面。如何将活动类添加到导航菜单基于URL，每个页面以特定颜色显示它？

df

Answer 1

此代码段很有用

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>

JS

$('#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

Answer 2

为ul提供课程或ID。然后，假设jQuery和ID为nav：

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

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

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

2 个答案: