一、先編寫一個(gè)高亮樣式

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); //此處就是可以查看是那個(gè)點(diǎn)擊的jQ對(duì)象
 4 
 5             //獲取點(diǎn)擊按鈕 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             // 為點(diǎn)擊的按鈕添加 高亮 class
18             document.getElementById(canshu).classList.add("upBtnCss");
19         });
20 
21 
22         //方法二
23         function chooseType(e) {
24 
25             //獲取點(diǎn)擊按鈕 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             // 為點(diǎn)擊的按鈕添加 高亮 class
38             document.getElementById(canshu).classList.add("upBtnCss");
39         }
40 
41 
42         //方法三
43         function chooseType(e) {
44 
45             //獲取點(diǎn)擊按鈕 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             // 為點(diǎn)擊的按鈕添加 高亮 class
60             document.getElementById(canshu).classList.add("upBtnCss");
61         }

四、效果圖

　　1、初始樣式

　　

　　2、點(diǎn)擊 按鈕二

　　

　　3、再次重新點(diǎn)擊 按鈕三

　　

五、其它查看鏈接

　　1、js判斷哪個(gè)按鈕被點(diǎn)擊？

　　2、用js添加刪除 class

總結(jié)

以上是生活随笔為你收集整理的为点击的按钮添加高亮的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。