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

页面部分

<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')}
})

点击li标签增加样式，并删除其它li标签样式相关推荐

jQuery的属性与样式之增加样式、删除样式、切换样式
开发工具与关键技术:Visual Studio ASP.NET MVC 作者:刘剑鸿撰写时间:2019年06月14日星期五 jQuery的属性与样式之增加样式.删除样式.切换样式 1 .addCl ...
li的鼠标移入移出事件和点击事件分别实现为当前li添加样式，删除其他li样式...
li.jsp(需要提前导入jquery.min.js 地址:http://www.cnblogs.com/zhouerba/p/7358069.html ) 鼠标移入:当前li变色,其他li恢复原 ...
用jQuery增加样式和删除样式
开发工具与关键技术:VS jQuery 作者:黄海滨撰写时间:2019年1月26日首先,我们先来说下增加样式 .addclass 它的意思是为为每个匹配元素添加指定类名然后,我们先设置它外部的一 ...
html li圆点单独颜色,html中li标签可以设置颜色吗
在HTML中如果在ul>li中添加子标签>a链接,修改li中或者是有什么方法可以让修改li的字体颜色时,a标签的字体颜色也改变, --由于CSS的层叠(cascading),a元素继承自l ...
js中获取当前点击的li标签以及li标签中a标签的id
可以使用以下代码来获取当前点击的li标签的id: document.querySelectorAll('li').forEach(function(li) {li.addEventListener(' ...
清除li标签之间空白间隙
什么情况下li标签会产生空白文本节点 li标签为块级元素,当其转化为inline-block元素是会出现空白文本节点,在一些浏览器中无法察觉,如Chrome.Edge等,但在Firefox浏览器中可以 ...
ul列表li标签前加带有颜色的圆点技巧
项目开发中,ul列表布局时li标签带有样式圆点??应该如何去处理呢? 一般情况下,默认的li标签前是有黑色小圆点,但是其颜色无法改变. 在布局初始化的时候我们会去掉默认样式. 所以,今天就为大家讲解一 ...
取消html中ul li标签前面的小圆点
html中ul li标签默认样式带小圆点,将list-style-type设置为none <ul><li class="company" style=" ...
CSS中如何去掉li标签前面的小圆点
CSS去掉li标签前面的小圆点 ul li 代码示例 <ul><li>西瓜</li><li>冬瓜</li><li>南瓜</ ...

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

点击li标签增加样式，并删除其它li标签样式相关推荐

最新文章

热门文章