Javascript 单击时是否将“活动”类应用于导航链接？

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

例如：

<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>

---

那么，当有人点击其中一个链接并将其指向页面上相应的ID时，我该如何告诉我的html，以使类处于活动状态？以及用于返回常规样式的链接？

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

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

jQuery

---

将ul a替换为更具体的，如.nav a

您必须使用JavaScript将该功能添加到应用程序中。每次单击链接时，将“active”类添加到触发元素，并将其从所有其他元素中删除。如果可以使用jQuery，这是很简单的，否则只会有一点繁琐

$(function() {
    $("ul.clearfix > li > a").click(function() {
        $("a.active").removeClass("active");
        $(this).addClass("active");
    });
});

如果您只使用本机JS，可以尝试以下方法：

---

第二个解决方案需要进行调整，以适合您的特定应用程序/DOM结构，因为它没有第一个解决方案灵活。

可能重复的谢谢！你的第一个解决方案奏效了。当用户向下滚动到特定id时，您知道有什么方法也可以应用活动id吗？

$(function() {
    $("ul.clearfix > li > a").click(function() {
        $("a.active").removeClass("active");
        $(this).addClass("active");
    });
});

var links = document.getElementsByTagName("a"); // more specific selector if other links
for (var i = 0; i < links.length; i++) {
    var link = links[i];
    link.onclick = function () {
        var prev = document.getElementsByClassName("active");
        if (prev && prev[0]) {
            prev[0].className = ""; // if using other classes, filter better
        }
        this.className += " active";
    };
}