码迷,mamicode.com
首页 > 其他好文 > 详细

为点击的按钮添加高亮

时间:2020-03-24 12:45:17      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:alt   move   链接   www   ntb   name   ref   button   blank   

一、先编写一个高亮样式

1         .btnCss {
2             background-color: #F6F6F6;
3             color: #000000;
4         }
5       
6         .upBtnCss {
7             background-color: #FD8D27;
8             color: #ffffff;
9         }

二、html

<div id="maxBox">
     <button id="dx_BS1" class="dx_BS btnCss layui-btn layui-btn-sm layui-btn-me-server"  onclick="chooseType(this)">按钮一</button>
     <button id="dx_BS2" class="dx_BS btnCss layui-btn layui-btn-sm layui-btn-me-server"  onclick="chooseType(this)">按钮二</button>
     <button id="dx_BS3" class="dx_BS btnCss layui-btn layui-btn-sm layui-btn-me-server"  onclick="chooseType(this)">按钮三</button>
     <button id="dx_BS4" class="dx_BS btnCss layui-btn layui-btn-sm layui-btn-me-server"  onclick="chooseType(this)">按钮四</button>
 </div>

三、js

 1         //方法一:
 2         $(‘.dx_BS‘).on(‘click‘, function (e) {
 3             var $target = $(event.target); //此处就是可以查看是那个点击的jQ对象
 4 
 5             //获取点击按钮 id
 6             var canshu = $(this).attr("id"); 
 7 
 8             //获取相同 class 元素
 9             var arr = document.getElementsByClassName("dx_BS");
10 
11             for (var i = 0; i < arr.length; i++) {
12 
13                 //遍历所有子元素移除 高亮 class
14                 arr[i].classList.remove("upBtnCss");
15             }
16 
17             // 为点击的按钮添加 高亮 class
18             document.getElementById(canshu).classList.add("upBtnCss");
19         });
20 
21 
22         //方法二
23         function chooseType(e) {
24 
25             //获取点击按钮 id
26             var canshu = $(e).attr("id"); 
27 
28             //获取相同 class 的兄弟元素(首先需要为所有的兄弟元素添加相同的class)
29             var arr = document.getElementsByClassName("dx_BS");
30 
31             for (var i = 0; i < arr.length; i++) {
32 
33                 //遍历所有子元素移除 高亮 class
34                 arr[i].classList.remove("upBtnCss");
35             }
36 
37             // 为点击的按钮添加 高亮 class
38             document.getElementById(canshu).classList.add("upBtnCss");
39         }
40 
41 
42         //方法三
43         function chooseType(e) {
44 
45             //获取点击按钮 id
46             var canshu = $(e).attr("id"); 
47 
48             //获取父id
49             var boxId = document.getElementById(e.id).parentNode.id;
50 
51             //获取父id下面所有的子元素
52             var arr = document.getElementById(boxId).children;
53 
54             for (var i = 0; i < arr.length; i++) {
55                 //遍历所有子元素移除 高亮 class
56                 arr[i].classList.remove("upBtnCss");
57             }
58 
59             // 为点击的按钮添加 高亮 class
60             document.getElementById(canshu).classList.add("upBtnCss");
61         }

四、效果图

  1、初始样式

  技术图片

  2、点击 按钮二 

  技术图片

  3、再次重新点击 按钮三

  技术图片

五、其它查看链接

  1、js判断哪个按钮被点击?

  2、用js添加删除 class

为点击的按钮添加高亮

标签:alt   move   链接   www   ntb   name   ref   button   blank   

原文地址:https://www.cnblogs.com/zhuyujie/p/12558012.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!