javascript - 单击时将类 "active"应用于导航链接？

Question

我的网站是一个视差单页滚动网站，所以我所有的导航链接都指向嵌套在该页面中的 ids...

例如:

<ul class="clearfix">
    <li><a href="index.html" class="active">Home</a></li>
    <li><a href="#portfolio">Work</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>

那么我如何告诉我的 html，当有人点击这些链接之一并将他们定向到页面上的相应 ID 时，我将激活该类？以及返回常规样式的事件链接？

Answer 1

假设您的链接元素包含在类为 nav 的元素中，并且您正在使用 jQuery，您可以执行以下操作:

$('.nav a').on('click', function(event) {
    $('.nav a.active').removeClass('active');
    $(this).addClass('active');
});

fiddle