为点击的按钮添加高亮

一、先编写一个高亮样式

        .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