tab bar to switch production

tab bar to switch production

First on the map

Requirement 1: By default, the first tab is selected, the display contents of the first tab

Strategy: The first tab is selected by default have the style, the first tab corresponding display: block, to none other dispaly

Requirement 2: Tab module: clicked into a red and white, the other becomes red and white

Strategy: exclusive ideas, each click a tab, the other tabs first set as the default style, then set himself the selected style. Here, we first set up a new class in style inside, this style to the selected tab.

Requirement 3: Each click on a selected card module corresponding to the content appears, click on the first li, showing the first div, click on the first few li, showing the first few div ......, know how to select the The first few li it?

Strategy: Using a for loop, each li to set a custom property, each click on the li, get the value of the property that liindex

 

Code section:

. 1  < body > 
2      < div class = "CON" > 
. 3          < div class = "tab_list" > 
. 4              < UL > 
. 5                  <-! First is selected by default -> 
. 6                  < Li class = "tabChange" > Product introduction </ li > 
7                  < li > specifications and packaging </ li > 
8                  < li > after-sales support </ li > 
9                  <li >Product reviews </ Li > 
10              </ UL > 
. 11          </ div > 
12 is          < div class = "tab_containt" > 
13 is              < div style = "the display: Block" > Product Introduction module </ div > 
14              < div > Specifications and Packaging module </ div > 
15              < div > aftermarket security module </ div > 
16              < div > product reviews module </ div >
17          </div>
18     </div>

style:

 1 <style>
 2         * {
 3             padding: 0;
 4             margin: 0;
 5         }
 6         
 7         .con {
 8             width: 70%;
 9             margin: 50px auto;
10         }
11         
12         .tab_list {
13             border-bottom: 1px solid red;
14             height: 60px;
15         }
16         
17         .tab_list ul {}
18         
19         .tab_list ul li {
20             list-style: none;
21             margin-right: 10px;
22             width: 23%;
23             height: 60px;
24             line-height: 60px;
25             color: red;
26             float: left;
27             text-align: center;
28             cursor: pointer;
29         }
30         
31         .tab_containt div {
32             display: none;
33         }
34         
35         .tab_list ul .tabChange {
36             color: aliceblue;
37             background-color: red;
38         }

js part:

1     <Script>
 2          // tab switching module tab: clicked becomes red and white, the other becomes red and white, so the idea to use an exclusive 
3          var LIS = document.querySelector ( "tab_list." ) .querySelectorAll ( "Li" );
 . 4          var items = document.querySelector ( "tab_containt.") querySelectorAll ( "div." );
 . 5          // the console.log (items); 
. 6  
. 7          // the console.log (LIS) ; 
8          // to all registered li click event 
. 9          for ( var I = 0; I <lis.length; I ++ ) {
 10              // click on the first li, showing a first div, click the first few li, show The first few ...... the this div 
11              //So how do we know that the first few clicks li it? Ideas: to set a custom attribute li, li How to 5 are provided with index numbers, of course, friends for loop 
12 is              LIS [I] .setAttribute ( "index" , I);
 13 is              LIS [I] = .onclick function () {
 14                  // the console.log ( "dianij"); 
15                  // exclusively 
16                  for ( var I = 0; I <lis.length; I ++ ) {
 . 17                      LIS [I] .className = "" ;
 18                  }
 19                  // their achievements 
20 is                  the this .className = "tabChange" ;
 21 is                  // get property values index tab 
22 is                  var= index the this .getAttribute ( "index" );
 23                  // console.log (index); 
24-  
25                  // first row he thought, to clear the contents of the other display content index th div of 
26                  for ( var i = 0; i < items.length; I ++ ) {
 27                      items [I] .style.display = "none" ;
 28                  }
 29                  // make the content of index boxes display 
30                  items [index] = .style.display "Block" ;
 31 is  
32              }
 33 is          }
 34 is      </ Script>