Haga clic en el botón Añadir se destaca

En primer lugar, el primero en escribir un estilo más destacado

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

Dos, html

< Div ID = "maxBox" > 
     < botón ID = "dx_BS1" clase = "dx_BS btnCss layui-BTN layui-BTN-sm layui-BTN-me-servidor"   onclick = "(esto) chooseType" >按钮一</ botón > 
     < botón ID = "dx_BS2" clase = "dx_BS btnCss layui-BTN layui-BTN-sm layui-BTN-me-servidor"   onclick = "chooseType (esto)" >按钮二</ botón > 
     < botón ID = "dx_BS3 " clase ="dx_BS btnCss layui-BTN layui-BTN-sm layui-BTN-me-servidor "   onclick= "(esto) chooseType" >按钮三</ botón > 
     < botón ID = "dx_BS4" clase = "dx_BS btnCss layui-BTN layui-BTN-sm layui-BTN-me-servidor"   onclick = "chooseType (esto)" >按钮四</ botón > 
 </ div >

Tres, JS

1          // Método a: 
2          $ ( 'Dx_BS.') EN ( 'Click',. Función (E) {
 3.              Var $ target = $ (event.target); // aquí es que podemos ver que un clic jQ objetos 
. 4  
. 5              // consiguen clic de botón ID 
6.              var canshu = $ ( el este ) .attr ( "ID" ); 
 . 7  
8.              // obtener el mismo elemento de clase 
9.              var ARR = document.getElementsByClassName ( "dx_BS" );
 10  
. 11              para ( var I = 0; I <arr.Length; I ++ ) {
 12 es  
13 es                  // atraviesa todos los elementos extraíbles destacaron clase 
14                 ARR [I] .classList.remove ( "upBtnCss" );
 15              }
 16  
. 17              // añadir un punto culminante a una clase clic en el botón 
18 es              document.getElementById (canshu) .classList.add ( "upBtnCss" );
 . 19          });
 20 es  
21 es  
22 es          // segundo método 
23 es          función chooseType (E) {
 24  
25              // obtener clic botón ID 
26 es              var canshu = $ (E) .attr ( "ID" ); 
 27  
28              // obtener los hermanos de la misma clase (primera necesidad la adición de la misma para toda clase hermanos) 
29              var ARR = document.getElementsByClassName ( "dx_BS" );
30  
31 es              para ( var i = 0; I <arr.Length; I ++ ) {
 32  
33 es                  // atraviesa todos los elementos extraíbles destacaron clase 
34 es                  ARR [I] .classList.remove ( "upBtnCss" );
 35              }
 36  
37 [              // añadir un toque de luz a una clase clic en el botón 
38 es              document.getElementById (canshu) .classList.add ( "upBtnCss" );
 39          }
 40  
41 es  
42 es          // método de tres 
43 es          función chooseType (E) {
 44 es  
45              // Obtener clic ID 
46 es              var canshu = $ (E) .attr ( "ID"); 
 47  
48              // Obtener Identificación del padre 
49              var boxID = document.getElementById (e.id) .parentNode.id;
 50  
51 es              // obtener todos de los siguientes sub-elementos Identificación del padre 
52 es              var ARR = document.getElementById boxID) .children ( ;
 53 es  
54 es              para ( var i = 0; I <arr.Length; I ++ ) {
 55                  // atraviesa todos los elementos extraíbles destacaron clase 
56 es                  ARR [I] .classList.remove ( "upBtnCss" );
 57 es              }
 58  
59              // agregar una clase más destacado para el botón de encaje 
60             document.getElementById (canshu) .classList.add ( "upBtnCss" );
61          }

En cuarto lugar, las representaciones

　　1, el estilo inicial

　　

　　2, haga clic en el botón para dos 

　　

　　3, una vez más el botón volver a hacer clic para tres

　　

V. Otros Ver enlace

　　1, determinar qué botón se hace clic JS?

　　2, complemento y la clase de borrado con js