当前位置: 首页 > news >正文

利用 Siblings一步实现多个同级div,只改变当前点击的div样式

记录一点,小技巧。直接上代码喽,因为今天还没有功夫扯皮呢。

        <!DOCTYPE html>
        <html>
            <head>
                <meta charset="UTF-8">
                <title>一步实现多个同级div,只改变点击的当前div样式</title>
            </head>
                <script type="text/javascript" src="js/jquery.js" ></script>
            <body>
                <div id="little_light">
                    <div >我是第一个同级div</div>
                    <div>我是第二个同级div</div>
                    <div>我是第三个同级div</div>
                    <div>我是第四个同级div</div>
                    <div>我是第五个同级div</div>
                    <div>我是第六个同级div</div> 
                    <div>我是第七个同级div</div>
                </div>
            </body>
            <style>
                .light_greycolor {
                        background-color:#FF8400;
                }
                div{
                    width: 140px; 
                    height: 30px;
                    }
            </style>
            <script>
                $(function(){
                $("#little_light div").bind("click",function(){
                        $(this).siblings('div').removeClass('light_greycolor');  // 删除其他兄弟元素的样式//jQuery siblings() 方法返回被选元素的所有同胞元素,并且可以使用可选参数来过滤对同胞元素的搜索。
                        $(this).addClass('light_greycolor'); 
                    });
            });
        </script>

        </html>

实现效果:
利用 Siblings一步实现多个同级div,只改变当前点击的div样式

利用 Siblings一步实现多个同级div,只改变当前点击的div样式

转载于:https://blog.51cto.com/13479739/2169250

相关文章:

  • 前端笔记-201808
  • 设置PHP最长运行时间
  • zabbix添加nginx中间件监控
  • 将MWeb的文章发布到自己做的网站(超级详细)
  • SELinux 宽容模式(permissive) 强制模式(enforcing) 关闭(disabled) 几种模式之间的转换...
  • 如何把本地文件上传到gitlab上已存在的工程里
  • Spring事务隔离级别详解
  • 反爬虫:利用ASP.NET MVC的Filter和缓存(入坑出坑)
  • 输入一条url后,发生了什么??
  • 超级鹰打码平台
  • Python中列表生成式和字典生成式练习
  • 复杂数据处理
  • 360病毒扫描蓝屏报错nvmini.sys
  • 操作系统成型之路
  • 伍翀:大数据实时计算Flink SQL解密
  • 【挥舞JS】JS实现继承,封装一个extends方法
  • Angular4 模板式表单用法以及验证
  • ERLANG 网工修炼笔记 ---- UDP
  • express如何解决request entity too large问题
  • HashMap ConcurrentHashMap
  • HTTP请求重发
  • learning koa2.x
  • node-glob通配符
  • node和express搭建代理服务器(源码)
  • Python学习之路13-记分
  • text-decoration与color属性
  • Theano - 导数
  • VUE es6技巧写法(持续更新中~~~)
  • Vue 重置组件到初始状态
  • Vue2.0 实现互斥
  • 创建一个Struts2项目maven 方式
  • 关于Flux,Vuex,Redux的思考
  • 汉诺塔算法
  • 力扣(LeetCode)21
  • 如何优雅地使用 Sublime Text
  • 入职第二天:使用koa搭建node server是种怎样的体验
  • 深入浏览器事件循环的本质
  • 事件委托的小应用
  • 突破自己的技术思维
  • 新书推荐|Windows黑客编程技术详解
  • 国内开源镜像站点
  • 如何通过报表单元格右键控制报表跳转到不同链接地址 ...
  • 整理一些计算机基础知识!
  • #免费 苹果M系芯片Macbook电脑MacOS使用Bash脚本写入(读写)NTFS硬盘教程
  • (html转换)StringEscapeUtils类的转义与反转义方法
  • (六)vue-router+UI组件库
  • (论文阅读30/100)Convolutional Pose Machines
  • (每日持续更新)jdk api之StringBufferInputStream基础、应用、实战
  • (三)模仿学习-Action数据的模仿
  • (算法)前K大的和
  • (转)eclipse内存溢出设置 -Xms212m -Xmx804m -XX:PermSize=250M -XX:MaxPermSize=356m
  • ****** 二十三 ******、软设笔记【数据库】-数据操作-常用关系操作、关系运算
  • .NET单元测试
  • .Net各种迷惑命名解释
  • .NET委托:一个关于C#的睡前故事