<div class="layui-inline" id=‘’   onclick="changeType(id)">
                <label class="layui-form-label"></label>
              </div>

function changeType(id){//id是通过绑定事件传过来的
            var askclass = document.getElementById('askclass'+id);//采取拼接方式获取当前点击的哪一个元素
            var askclassParsent=askclass.parentNode; //获取当前父级分类
            var askclassChriden=askclassParsent.children//获取父元素下的所有子元素
             for(var i=0;i<askclassChriden.length;i++){//循环所有子元素
                if(askclassChriden[i]==askclass){//如果点击的是当前子元素
                  askclassChriden[i].classList.add("select")//添加class样式
                }else{
                askclassChriden[i].classList.remove("select") //不是的话就移除其他子元素的样式
                }
                }
            
            }

js动态绑定class(当前父级div下的子元素有没有这个class,有的话移除,没有的话添加)的更多相关文章

  1. JS关闭当前父级div

    代码: <img src="img/diagram.png" onclick="javascript:this.parentNode.parentNode.remo ...

  2. 利用CSS背景颜色属性使父级div背景透明同时避免子级标签透明。

    实现背景色透明效果的代码 实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性. 输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及C ...

  3. <转载>如何解决子级用float浮动父级div高度不能自适应的问题

    转载:http://www.kwstu.com/ArticleView/divcss_2013101582430202 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内 ...

  4. 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...

  5. CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...

  6. js获取iframe和父级之间元素,方法、属,获取iframe的高度自适应iframe高度

    摘自:http://blog.csdn.net/kongjiea/article/details/38870399 1.在父页面 获取iframe子页面的元素 (在同域的情况下 且在http://下测 ...

  7. 子级div相对于父级div位置不变

    设置父级div为相对位置 设置子级div为绝对位置 代码如下: <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  8. 同级div设置display:inline-block,父级div强制不换行

    同级div设置display:inline-block,父级div强制不换行 <html> <head></head> <body> <div i ...

  9. 子级用css float浮动 而父级div没高度不能自适应高度

    子级对象使用css float浮动 而父级div不能自适应高度. 对父级div标签闭合</div>前加一个clear清除浮动对象. <!DOCTYPE html> <ht ...

随机推荐

  1. CompletableFuture的使用例子

    1. CompletableFuture的介绍 在Java8时被引入,在包java.util.concurrent下,是Java多线程编程中的一个类,扩展了Future中很多功能,Completabl ...

  2. 两种方式实现sticky footer绝对底部

    一.什么是sticky footer 如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块会被内容向下推送,我们看到的效果就如下面两张图这样.这种效果基本是无处不在的,很受欢迎. ...

  3. Navicat for MySQL数据库管理工具安装和破解

    Navicat for MySQL官方下载地址:https://www.navicat.com/en/download/navicat-for-mysql 1.下载后安装 navicat110_mys ...

  4. 存储系列之 RAID技术原理简介

    引言:RAID技术是现代大规模存储的基础,“基础(技术)是拿来革命的”.我查raid相关资料时,查布尔运算,竟然一路查到“香农原理”,这不是有个视频中HW的任总提到的吗,多基础的东西,任总却毫不含糊, ...

  5. Golang源码学习:使用gdb调试探究Golang函数调用栈结构

    本文所使用的golang为1.14,gdb为8.1. 一直以来对于函数调用都仅限于函数调用栈这个概念上,但对于其中的详细结构却了解不多.所以用gdb调试一个简单的例子,一探究竟. 函数调用栈的结构(以 ...

  6. 高效、可维护、组件化的CSS

    如何写出更加高效的CSS? 主要有以下四个关键点: 高效的CSS 可维护的CSS 组件化的CSS hack-free CSS 1.书写高效的CSS代码 * 使用 外联样式 替代行间 样式或者内嵌样式. ...

  7. 最小生成树 状压+prim hdu2489

    Minimal Ratio TreeTime Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  8. 有向图变为强连通图 hdu2767

    Proving Equivalences Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Oth ...

  9. LightOJ1282

    题目大意: 给出 n 和 k,请你求出 n^k 次方的前三位和后三位. 解题思路: 后三位用快速幂,不加赘述. 求前三位的方法: AC代码: #include <iostream> #in ...

  10. 织梦系统dedecms实现列表页双样式,列表样式循环交替变化

    有时候做列表页需要交替变换样式,那如何实现列表页双样式呢? 在DeDeCMS里面有这样一个函数,可以循环赋予html代码不同的样式,如下: [field:global function=MagicVa ...