js遍历添加栏目类添加css,再点击其它删除css

简介: 该文章介绍了使用JavaScript遍历添加和删除CSS类的方法。示例代码展示了如何在点击时为当前元素添加类,同时移除其他元素的类。其中包含两个示例:一是遍历`.radio-group .ckselect`并处理点击事件,二是实现点击`.zu-top-nav-userinfo`显示/隐藏`.peoples`层,并处理文档点击以关闭层。代码适用于网页交互效果的实现。

很多网页设计都可能会用到js遍历去增加css类别,这篇文章主要介绍了js遍历添加栏目类添加cs, 再点击其它删除css的实例代码,非常不错,具有一定的参考借鉴借鉴价值,原作者是谁已无从知晓,但是代码是有效的,有需要的朋友可以参考下。

具体代码如下

//js遍历添加栏目类添加css 再点击其它删除css

$(".radio-group .ckselect").each(function(index) {

 $(this).click(function() {

   var tagid=$(this).attr('tagid');

   $("#tagid").val(tagid)

   $(".ckselect").removeClass("selected");

   $(".ckselect").eq(index).addClass("selected")

 })

});

还有一种更优的方案,代码如下:

//js点击显示关闭层,空白区域也关闭  

$(".zu-top-nav-userinfo").click(function(e) {

 if ($(".peoples").hasClass("allhide")) {

   $(".peoples").hide();

   $(".peoples").removeClass("allhide");

   return

 }

 e.stopPropagation();

 $(".peoples").show();

 $(".peoples").addClass("allhide")

});

$(document).click(function() {

 if ($(".peoples").hasClass("allhide")) {

   $(".peoples").hide();

   $(".peoples").removeClass("allhide")

 }

});

以上所述就是给大家介绍的js遍历添加栏目类添加css,再点击其它删除css的教程,希望对大家有所帮助,如果大家有任何疑问请给我留言!

目录
相关文章
|
8天前
|
设计模式 JavaScript 前端开发
在JavaScript中,继承是一个重要的概念,它允许我们基于现有的类(或构造函数)创建新的类
【6月更文挑战第15天】JavaScript继承促进代码复用与扩展,创建类层次结构,但过深的继承链导致复杂性增加,紧密耦合增加维护成本,单继承限制灵活性,方法覆盖可能隐藏父类功能,且可能影响性能。设计时需谨慎权衡并考虑使用组合等替代方案。
30 7
|
2天前
|
JavaScript 前端开发
记录Javascript数组类练习
记录Javascript数组类练习
8 1
|
6天前
|
JavaScript 前端开发 Java
【JavaScript】ECMAS6(ES6)新特性概览(二):解构赋值、扩展与收集、class类全面解析
【JavaScript】ECMAS6(ES6)新特性概览(二):解构赋值、扩展与收集、class类全面解析
15 2
|
6天前
|
存储 JavaScript 前端开发
【JavaScript】JavaScript 中的 Class 类:全面解析
【JavaScript】JavaScript 中的 Class 类:全面解析
13 1
|
9天前
|
JavaScript 定位技术 API
Js地图路线规划以及点击获取经纬度
Js地图路线规划以及点击获取经纬度
|
9天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
9天前
|
JavaScript
JS图表生成以及点击修改图表样式
JS图表生成以及点击修改图表样式
|
2天前
|
JavaScript 容器
JS图表制作及点击按钮切换图表样式
JS图表制作及点击按钮切换图表样式
5 0
|
1月前
|
前端开发 JavaScript UED
前端开发的魔法:CSS动画与JavaScript的完美结合
本文将探讨如何利用CSS动画和JavaScript的结合,为前端页面增添生动的效果。我们将通过实例展示如何使用这两种技术为网页元素创建吸引人的动画效果,并讨论它们的优缺点和适用场景。
41 0
|
Web App开发 编解码 前端开发
浏览器原理 23 # 分层和合成机制:为什么CSS动画比JavaScript高效?
浏览器原理 23 # 分层和合成机制:为什么CSS动画比JavaScript高效?
122 0
浏览器原理 23 # 分层和合成机制:为什么CSS动画比JavaScript高效?