为点击的按钮添加高亮
一、先编写一个高亮样式
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、再次重新点击 按钮三
五、其它查看链接
