クリックして[追加]ボタンが強調表示されます

まず、ハイライトのスタイルを書きます

1          .btnCss {
 2              背景色：＃F6F6F6。
3              色：＃000000 ;
4          }
 5  　　　　　　
6          .upBtnCss {
 7              背景色：＃FD8D27。
8              色：#FFFFFF。
9          }

二、html

< DIV ID = "maxBox" > 
     < ボタンのid = "dx_BS1" クラス= "dx_BS btnCss layui-BTN layui-BTN-SM layui-BTN-ME-サーバー"   onclickの= "chooseType（この）" >按钮一</ ボタン> 
     < ボタンのid = "dx_BS2" クラス= "dx_BS btnCss layui-BTN layui-BTN-SM layui-BTN-ME-サーバー"   onclickの= "chooseType（この）" >按钮二</ ボタン> 
     < ボタンのid = "dx_BS3 「クラス=」dx_BS btnCss layui-BTN layui-BTN-SM layui-BTN-ME-サーバー"   onclickの= "chooseType（この）" >按钮三</ ボタン> 
     < ボタンのid = "dx_BS4" クラス= "dx_BS btnCss layui-BTN layui-BTN-SM layui-BTN-ME-サーバー"   onclickの= "chooseType（本）" >按钮四</ ボタン> 
 </ DIV >

三、JS

1          // 方法：
2          。$（ 'Dx_BS'）ON（ 'クリック'、機能（E）{
 。3              のvar $ターゲット= $（event.target）; // ここでは、我々はそのクリックjQのを見ることができるということですオブジェクト
4。 
5。             // クリックボタンのIDを取得します
6。             VAR canshu = $（この）.ATTR（ "ID" ）; 
 。7  
。8              // 同じクラスの要素を取得します
。9              VAR ARR = document.getElementsByClassName（ "dx_BS" ）;
 10  
11。             のために（VAR I <arr.length; I ++ I = 0 ）{
 12である 
13れる                 // すべてのリムーバブル要素が強調表示されたクラス横断
14                 ARR [I] .classList.remove（ "upBtnCss" ）;
 15              }
 16  
17              // ボタンにハイライトを追加し、クラスクリック
18である              のdocument.getElementById（canshu）.classList.add（ "upBtnCss" ;）
 19。         ）};
 20  
21は 
22はある         // 第二の方法
23で         機能chooseType（E）{
 24  
25              //は、クリックボタンのID取得
26がある             VAR canshu = $（E）.ATTR（ "ID" ）; 
 27  
28              // 同じクラスの兄弟（最初の必要性を取得します）すべての兄弟クラスにそれを追加
29              のvar ARR = document.getElementsByClassName（ "dx_BS" ）。
30  
31である             ため（VAR I = 0、I <arr.length; I ++ ）{
 32  
33である                 //はすべてのリムーバブル要素がクラス強調表示されたトラバース
34をれる                  ARR [I] .classList.remove（ "upBtnCss" ）;
 35              }
 36  
37 [              // ボタンにハイライトを追加するクラスクリック
38で              のdocument.getElementById（canshu）.classList.add（ "upBtnCss" ）;
 39          }
 40  
41である 
42である         // 方法3 
43れる         関数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である             ため（varが I = 0、I <arr.length; I ++ ）{
 55                  // すべてのリムーバブル要素がクラス強調表示されたトラバース
56は                  ARR [I]が.classList.remove（ "upBtnCss" ）;
 57である             }
 58  
59              // ボタンのクリックのハイライトクラスの追加
60             document.getElementById（canshu）.classList.add（ "upBtnCss" ）;
61          }

第四に、レンダリング

　　1、最初のスタイル

　　2、2のボタンをクリックします

　　3、再び3のボタンを再度クリックしてください

V.その他のビューリンク

　　1、JSがクリックされたボタンを決定？

　　2、JSで追加および削除クラス

クリックして[追加]ボタンが強調表示されます

おすすめ