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的{{1}}类下面的active

中

如果您将活动类从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;
}

2。。更好的方法是在 <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>

上执行此操作

以下是代码段：

$('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;
}

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

如果要更改颜色，则必须将更改应用到a标签而不是li。因此，我使用以下jQuery解决了该问题，并且还优化了您的代码：

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

Here是jsfiddle的链接，我还没有更改您的HTML或CSS，我所做的只是更改了CSS。

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

4 个答案: