目标效果

我们常见的效果是,在同一排选项卡和切换按钮,或者不同的列表标题,当我们点中后出现突出的效果,这种一般都是会有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"); 
});

效果演示