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

文章目录

目标效果

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

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

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

[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;
}
[/css]

[php]
jQuery(".navmenu").on(‘click’,’li’,function(){
jQuery(this).addClass("active").siblings().removeClass("active");
});
[/php]

原文