点击选项卡/标题按钮/LI列表 突出显示 用JS的方法点击增加class

目标效果

我们常见的效果是，在同一排选项卡和切换按钮，或者不同的列表标题，当我们点中后出现突出的效果，这种一般都是会有Class上的区别，我们只需要找到区别就可以加以控制。

效果原理

这种效果的原理是：点击对应的元素后，为这个元素添加对应Class ，点击其它的又自动移除Class。对此Class写放不同样式即可。

HTML部分

<ul class="navmenu">
<li><a>选项卡 1</a></li>
<li><a>选项卡 2</a></li>
<li><a>选项卡 3</a></li>
</ul>

CSS部分

.navmenu {
  display: flex;
  justify-content: space-between;
}

.navmenu li{
  list-style: none;cursor: pointer;
  
}
.navmenu li  a{
padding:5px 10px;
}
.navmenu li.active a{
  color: #fff;
  background-color:#f06b03;
}

JavaScript部分

jQuery(".navmenu").on('click','li',function(){ 
jQuery(this).addClass("active").siblings().removeClass("active"); 
});

原文

https://jsfiddle.net/maverickabhi/caqu5sf0/5/