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

Question

我面临删除添加last-childCSS属性的样式的问题

我第一次想要突出显示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>

标签： javascripthtmlcss

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();
       });
     });