点击li标签增加样式，并删除其它li标签样式

最新推荐文章于 2021-03-20 04:04:19 发布

李佳和89757

最新推荐文章于 2021-03-20 04:04:19 发布

阅读量8.3k

点赞数 2

文章标签：标签 class javascript jquery

本文链接：https://blog.csdn.net/ljh243581579/article/details/78684271

版权

页面部分

<ul class="layui-nav layui-nav-tree" lay-filter="demo">
  <li class="layui-nav-item layui-nav-itemed">
       <a href="javascript:;">默认展开<span class="layui-nav-more"></span></a>
       <dl class="layui-nav-child">
           <dd><a href="javascript:;">选项一</a></dd>
           <dd><a href="javascript:;">选项二</a></dd>
           <dd><a href="javascript:;">选项三</a></dd>
           <dd><a href="">跳转项</a></dd>
       </dl>
   </li>
   <li class="layui-nav-item">
       <a href="javascript:;">解决方案<span class="layui-nav-more"></span></a>
       <dl class="layui-nav-child">
           <dd><a href="">移动模块</a></dd>
           <dd><a href="">后台模版</a></dd>
           <dd><a href="">电商平台</a></dd>
       </dl>
   </li>
   <li class="layui-nav-item"><a href="">云市场</a></li>
   <li class="layui-nav-item"><a href="">社区</a></li>
</ul>

jQuery部分：

//添加li标签的点击事件
$('.layui-nav-item').click(function () {
    var getClass = $(this).attr('class');
    //判断当前样式
    if(getClass == 'layui-nav-item layui-nav-itemed'){
        $(this).removeClass('layui-nav-itemed')
    }else if(getClass == 'layui-nav-item'){
    //增加样式前先删除掉其它li标签的样式
        $(this).siblings('li').removeClass('layui-nav-itemed')
        $(this).addClass('layui-nav-itemed')
    }
})