Question

在点击/激活链接时将活动类添加到父列表，我尝试使用JavaScript注入，如下所示：

$(document).ready(
    function()
    {
        //injecting active status to the navigation bar lists
        var element = document.getElementById("navbar-ul");
        var links   = element.getElementsByTagName("a");

        for(var i = 0; i < links.length ; i++) {
            links[i].onclick(function () {
                links[i].parent().addClass('active');
            });
        }
    }
);

但是我收到以下错误：

TypeError: links[i].onclick is not a function

我应该如何实现这一目标？

Answer 1

更简洁的JQuery方法来解决这个问题

$('#navbar-ul a').each(function() {
    $(this).on('click', function() {
        $(this).parent().addClass('active');
    });
});

Answer 2

使用jQuery非常简单：

$("#navbar-ul a").click(function(){
   $(this).parent().addClass("active");       
});

EXAMPLE 1

我猜你正在尝试将一个活动状态添加到被点击的链接并删除其他链接？如果是这样，您可以使用.siblings()查找其他链接并删除其类：

$("#navbar-ul a").click(function(){
   $(this).closest("li").addClass("active").siblings("li").removeClass("active");   

});

EXAMPLE 2

Answer 3

您最好为需要eventListener的标记添加一个类。（用jquery）

$(document).ready(function() {

    $("#navbar-ul a").on("click", function() {
        var active = document.querySelector('#navbar-ul .active');
        if(active){
            $("#navbar-ul a").removeClass('active');
        }
        $(this).addClass("active");
    });

）;

单击链接时将活动类添加到父列表

3 个答案: