javascript - 如何删除使用 css last-child 添加的样式

Question

我面临着删除使用 css 的 last-child 属性添加的样式的问题

第一次 我希望 last-list 项在单击时突出显示> 必须突出显示

$(function(){
   $('.all-list li').click(function(){
      $(this).css('background','red');
      // tried to remove code added with csss, :last-child
      $('.all-list').last().css('background','none');
   });
});

ul.all-list{
  list-style:none;
}

ul.all-list li{
  display:inline-block;
  padding:5px;
  font-size:20px;
}

ul.all-list li:last-child{
  background:red;
}

active-class{
   background:red !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="all-list">
   <li>first</li>
   <li>second</li>
   <li>third</li>
   <li>fourth</li>
</ul>

Answer 1

您可以使用兄弟删除颜色期望点击一个 你可以试试这个方法

 $(function(){
       $('.all-list li').click(function(){
          $(this).css('background','red');
          $(this).siblings().css('background', 'none');
       });
    });

或者

 $(function(){
    $('.all-list li').click(function(){
    $(this).css('background','red').siblings().css('background', 'none').end();
       });
     });