Click the Add button is highlighted

First, the first to write a highlight style

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

Two, 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>

Three, js

1          // Method a: 
2          . $ ( '. Dx_BS') ON ( 'the Click', function (E) {
 . 3              var $ target = $ (event.target); // here is that we can see that a click jQ objects 
. 4  
. 5              // get click button ID 
. 6              var canshu = $ ( the this ) .attr ( "ID" ); 
 . 7  
. 8              // get the same class element 
. 9              var ARR = document.getElementsByClassName ( "dx_BS" );
 10  
. 11              for ( var I = 0; I <arr.length; I ++ ) {
 12 is  
13 is                  // traverses all removable elements highlighted class 
14                 ARR [I] .classList.remove ( "upBtnCss" );
 15              }
 16  
. 17              // add a highlight to a button clicked class 
18 is              document.getElementById (canshu) .classList.add ( "upBtnCss" );
 . 19          });
 20 is  
21 is  
22 is          // second method 
23 is          function chooseType (E) {
 24  
25              // get click button ID 
26 is              var canshu = $ (E) .attr ( "ID" ); 
 27  
28              // Get siblings of the same class (first need adding the same for all sibling class) 
29              var ARR = document.getElementsByClassName ( "dx_BS" );
30  
31 is              for ( var I = 0; I <arr.length; I ++ ) {
 32  
33 is                  // traverses all removable elements highlighted class 
34 is                  ARR [I] .classList.remove ( "upBtnCss" );
 35              }
 36  
37 [              // add a highlight to a button clicked class 
38 is              document.getElementById (canshu) .classList.add ( "upBtnCss" );
 39          }
 40  
41 is  
42 is          // method three 
43 is          function chooseType (E) {
 44 is  
45              // Get click ID 
46 is              var canshu = $ (E) .attr ( "ID"); 
 47  
48              // Get parent id 
49              var boxID = document.getElementById (e.id) .parentNode.id;
 50  
51 is              // get all of the following sub-elements parent id 
52 is              var ARR = document.getElementById (boxID) .children ;
 53 is  
54 is              for ( var I = 0; I <arr.length; I ++ ) {
 55                  // traverses all removable elements highlighted class 
56 is                  ARR [I] .classList.remove ( "upBtnCss" );
 57 is              }
 58  
59              // add a highlight class for the button clicks 
60             document.getElementById(canshu).classList.add("upBtnCss");
61         }

Fourth, renderings

　　1, the initial style

　　2, click the button for two

　　3, once again re-click button for three

V. Other View link

　　1, JS determine which button is clicked?

　　2, add and delete class with js

Click the Add button is highlighted

Guess you like