JQuery：向所有孩子添加点击事件，不起作用

Question

我正在尝试将“活动”类添加到一个且一次只能单击一个菜单项。 然后，活动类允许我将所选菜单项的背景变为绿色。

当我将.click（）单独添加到每个子节点时，它可以工作，但不能与当前的.children（）。each（）等一起使用。

我做错了什么，我该如何解决这个问题？

  $("#left_menu").children().each(function(){ $(this).click(function(){ if (!$(this).hasClass('active')){ $(this).addClass('active'); } $(this).siblings().each(function(){ if ($(this).hasClass('active')){ $(this).removeClass('active'); } }); }); }); 

 ul { list-style-type: none; margin: 0; padding: 0; width: 25%; background-color: #e9ebee; position: fixed; height: 100%; overflow: auto; border: 1px solid #e9ebee; border-radius: 6px; font-family: 'Lato', Helvetica, sans-serif; font-size: 18px; } li a { display: block; color: #000; padding: 8px 18px; text-decoration: none; } li a.active { background-color: #008b10; color: white; } li a:hover:not(.active) { background-color: #555; color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="left_menu"> <li><a id="tab_wireless" href="#">System Status</a></li> <li><a id="tab_system" href="#">Network Configuration</a></li> <li><a id="radio_list" href="#">Radio List</a></li> <li><a id="search" href="#">Search</a></li> </ul> 

Answer 1

1.问题与您的代码是要adding class在children of ul即li 。 而在css下面active上类a

li a.active {
    background-color: #008b10;
    color: white;
}

如果您将活动类从a更改为li那么您当前的代码也将起作用。

li.active {
    background-color: #008b10;
    color: white;
}

以下是您当前代码的代码段：

 $("#left_menu").children().each(function(){ $(this).click(function(){ if (!$(this).hasClass('active')){ $(this).addClass('active'); } $(this).siblings().each(function(){ if ($(this).hasClass('active')){ $(this).removeClass('active'); } }); }); }); 

 ul { list-style-type: none; margin: 0; padding: 0; width: 25%; background-color: #e9ebee; position: fixed; height: 100%; overflow: auto; border: 1px solid #e9ebee; border-radius: 6px; font-family: 'Lato', Helvetica, sans-serif; font-size: 18px; } li a { display: block; color: #000; padding: 8px 18px; text-decoration: none; } li.active { background-color: #008b10; color: white; } li a:hover:not(.active) { background-color: #555; color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="left_menu"> <li><a id="tab_wireless" href="#">System Status</a></li> <li><a id="tab_system" href="#">Network Configuration</a></li> <li><a id="radio_list" href="#">Radio List</a></li> <li><a id="search" href="#">Search</a></li> </ul> 

2.更好的方法你可以在$('ul li a').click上执行此操作$('ul li a').click

这是代码片段：

 $(document).ready(function(){ $('ul li a').click(function(){ $('li a').removeClass("active"); $(this).addClass("active"); }); }); 

 ul { list-style-type: none; margin: 0; padding: 0; width: 25%; background-color: #e9ebee; position: fixed; height: 100%; overflow: auto; border: 1px solid #e9ebee; border-radius: 6px; font-family: 'Lato', Helvetica, sans-serif; font-size: 18px; } li a { display: block; color: #000; padding: 8px 18px; text-decoration: none; } li a.active { background-color: #008b10; color: white; } li a:hover:not(.active) { background-color: #555; color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="left_menu"> <li><a id="tab_wireless" href="#">System Status</a></li> <li><a id="tab_system" href="#">Network Configuration</a></li> <li><a id="radio_list" href="#">Radio List</a></li> <li><a id="search" href="#">Search</a></li> </ul> 

Answer 2

你真的不需要这么多的事件处理程序。 您可以使用委托使用几行代码并使用事件冒泡来完成此操作。

这是代码示例。

 $("#left_menu").on('click', function(event) { $("#left_menu a.active").removeClass("active"); $(event.target).addClass('active') }); 

 ul { list-style-type: none; margin: 0; padding: 0; width: 25%; background-color: #e9ebee; position: fixed; height: 100%; overflow: auto; border: 1px solid #e9ebee; border-radius: 6px; font-family: 'Lato', Helvetica, sans-serif; font-size: 18px; } li a { display: block; color: #000; padding: 8px 18px; text-decoration: none; } li a.active { background-color: #008b10; color: white; } li a:hover:not(.active) { background-color: #555; color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="left_menu"> <li><a id="tab_wireless" href="#">System Status</a></li> <li><a id="tab_system" href="#">Network Configuration</a></li> <li><a id="radio_list" href="#">Radio List</a></li> <li><a id="search" href="#">Search</a></li> </ul> 

Answer 3

请检查以下代码。 在此处单击其他li元素的“活动”类将被删除，并在所单击的项目上添加“活动”类。

$("#left_menu li").click(function(){
  var clicked_li = $(this);
  $("#left_menu li").not(clicked_li).removeClass('active'); // Will remove the class active if it is present;
  clicked_li.addClass('active'); // Will add the class if does not exists;
});

Answer 4

如果要更改颜色，则必须将更改应用于不是li a标记。 所以我使用以下jQuery解决了这个问题，我也优化了你的代码：

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

这里是jsfiddle的链接，我在HTML或CSS中没有改变，我所做的就是改变你的CSS。