為點擊的按鈕添加高亮

一、先編寫一個高亮樣式

        .btnCss {
            background-color: #F6F6F6;
            color: #000000;
        }
　　　　　　
        .upBtnCss {
            background-color: #FD8D27;
            color: #ffffff;
        }

二、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

        //方法一：
        $('.dx_BS').on('click', function (e) {
            var $target = $(event.target); //此處就是可以查看是那個點擊的jQ對象

            //獲取點擊按鈕 id
            var canshu = $(this).attr("id"); 

            //獲取相同 class 元素
            var arr = document.getElementsByClassName("dx_BS");

            for (var i = 0; i < arr.length; i++) {

                //遍歷所有子元素移除 高亮 class
                arr[i].classList.remove("upBtnCss");
            }

            // 為點擊的按鈕添加 高亮 class
            document.getElementById(canshu).classList.add("upBtnCss");
        });


        //方法二
        function chooseType(e) {

            //獲取點擊按鈕 id
            var canshu = $(e).attr("id"); 

            //獲取相同 class 的兄弟元素（首先需要為所有的兄弟元素添加相同的class）
            var arr = document.getElementsByClassName("dx_BS");

            for (var i = 0; i < arr.length; i++) {

                //遍歷所有子元素移除 高亮 class
                arr[i].classList.remove("upBtnCss");
            }

            // 為點擊的按鈕添加 高亮 class
            document.getElementById(canshu).classList.add("upBtnCss");
        }


        //方法三
        function chooseType(e) {

            //獲取點擊按鈕 id
            var canshu = $(e).attr("id"); 

            //獲取父id
            var boxId = document.getElementById(e.id).parentNode.id;

            //獲取父id下面所有的子元素
            var arr = document.getElementById(boxId).children;

            for (var i = 0; i < arr.length; i++) {
                //遍歷所有子元素移除 高亮 class
                arr[i].classList.remove("upBtnCss");
            }

            // 為點擊的按鈕添加 高亮 class
            document.getElementById(canshu).classList.add("upBtnCss");
        }

四、效果圖

　　1、初始樣式

　　

　　2、點擊 按鈕二 

　　

　　3、再次重新點擊 按鈕三

　　

五、其它查看鏈接

　　1、js判斷哪個按鈕被點擊？

　　2、用js添加刪除 class