javascript-通过单击li设置其他li元素的样式

如何为其他li元素添加或删除css.

单击li标签,如何更改li的背景色.

将特定标签(单击的li)的背景颜色更改为其他颜色,将其他更改更改为灰色-更改需要在特定UL内部进行的更改,而不是所有UL标签.

注意：ul类都必须保持相同的名称

    <div id ="divid">
<div>
     <ul class="togle" data-id="1">
      <li class="myview active> one <li>
      <li class="myview > two <li>
      <li class="myview > three <li>
     <ul>
    </div>
    <div>
     <ul class="togle" data-id="2">
      <li class="myview > one <li>
      <li class="myview > two <li>
      <li class="myview active> three <li>
    <ul>
    </div>
    ....
    .....
    .....
</div>

喜欢有更多..

JS：

var element = $('#divid');
element.on('click', '.togle', function(e) {
        //e.preventDefault();
        console.log("========");    

       $('#divid .togle li').removeClass('active');
        $(this).toggleClass('active');
    });

CSS：

.myview {
background-color: #eee;
}
.myview .active {
background-color: #FF0000;
}

解决方法:

正如其他人所述,您需要使用siblings()来仅定位当前ul中的项目.

另外,您的CSS有点过时,不会触发您期望的突出显示.您应该使用CSS规则：

.myview.active

相反,您有：

.myview .active

多余的空间很重要,当您在没有空格的情况下编写它时,意味着您要同时使用这两个类来定位元素.有了空格,则意味着您要针对活动类的子元素,而父元素是myview类.

下面有一个正在运行的示例应该可以正常工作.

$(".togle .myview").click(function() {
  var self = $(this);
  self.siblings("li.myview").removeClass("active");
  self.addClass("active");
});

.myview {
  background-color: #eee;
}
.myview.active {
  background-color: #FF0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="togle" data-id="1">
  <li class="myview active"> one </li>
  <li class="myview"> two </li>
  <li class="myview"> three </li>
</ul>
<ul class="togle" data-id="2">
  <li class="myview"> one </li>
  <li class="myview"> two </li>
  <li class="myview active"> three </li>
</ul>