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的教程,希望对大家有所帮助,如果大家有任何疑问请给我留言!

目录
相关文章
|
10天前
|
JavaScript API
js【最佳实践】遍历数组的八种方法(含数组遍历 API 的对比)for,forEach,for of,map,filter,reduce,every,some
js【最佳实践】遍历数组的八种方法(含数组遍历 API 的对比)for,forEach,for of,map,filter,reduce,every,some
21 1
|
12天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
10天前
|
算法 JavaScript
JS 【详解】树的遍历(含深度优先遍历和广度优先遍历的算法实现)
JS 【详解】树的遍历(含深度优先遍历和广度优先遍历的算法实现)
13 0
JS 【详解】树的遍历(含深度优先遍历和广度优先遍历的算法实现)
|
13天前
|
JavaScript 前端开发 容器
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
17 2
|
13天前
|
JavaScript 前端开发
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
12 1
|
5天前
|
测试技术 UED
断网之后的页面,Autox.js是点击还是上下滑动比较好?
断网之后的页面,Autox.js是点击还是上下滑动比较好?
|
10天前
|
算法 JavaScript
JS 【详解】二叉树(含二叉树的前、中、后序遍历技巧和算法实现)
JS 【详解】二叉树(含二叉树的前、中、后序遍历技巧和算法实现)
18 0
|
10天前
|
JavaScript 索引
js 类数组 转 数组
js 类数组 转 数组
11 0
|
13天前
|
前端开发 C++
css 鼠标悬浮显示放大图片 vs 鼠标点击显示放大图片
css 鼠标悬浮显示放大图片 vs 鼠标点击显示放大图片
14 0
|
13天前
|
前端开发 JavaScript
【HTML+CSS+JavaScript】3d-boxes-background
【HTML+CSS+JavaScript】3d-boxes-background
7 0