tab栏切换布局

案例分析

1.Tab栏切换有两个大的模块；

2.上面是模块选项卡，点击某一个，当前的底色为红色，其余不变（排他思想），用修改雷鸣的方式；

3.下面的模块内容，会跟随上面的选项卡变化，所以下面的模块变化需要写到点击事件里面；

4.规律：下面的模块显示内容和上面的选项卡意义对应相匹配；

5.核心思路：给上面的tab_list里面的所有小li添加自定义属性，属性值从0开始编号（索引）；

6.当我们点击tab_list里面的某个小li，让tab_con里面对应序号的内容显示，其余隐藏（派他思想）。

效果展示

代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Tab栏切换布局</title>
 6         <style>
 7             *{margin: 0; padding: 0;}
 8             li{list-style-type: none;}
 9             .tab{width: 860px;margin: 100px auto;}
10             .tab_list{height: 40px;background-color: #f1f1f1;border: 1px solid #ccc;}
11             .tab_list li{float: left;height: 40px;line-height: 40px;text-align: center;padding: 0 45px;cursor: pointer;}
12             .tab_list .current{background-color: rgb(180, 29, 29);color: azure;}
13             .item{display: none;}
14         </style>
15     </head>
16     <body>
17         <div class="tab">
18             <div class="tab_list">
19                 <ul>
20                     <li class="current">商品介绍</li>
21                     <li>规格与包装</li>
22                     <li>售后保障</li>
23                     <li>商品评价（50000）</li>
24                     <li>手机社区</li>
25                 </ul>
26             </div>
27             <div class="tab_con">
28                 <div class="item" style="display: block;">商品介绍模块内容</div>
29                 <div class="item">规格与包装模块内容</div>
30                 <div class="item">售后保障模块内容</div>
31                 <div class="item">商品评价（50000）模块内容</div>
32                 <div class="item">手机社区模块内容</div>
33             </div>
34         </div>
35         <script>
36             //获取元素
37             var tab_list=document.querySelector(".tab_list");
38             var lis=tab_list.querySelectorAll("li");
39             var tab_con=document.querySelector(".tab_con");
40             var items=tab_con.querySelectorAll(".item");
41             //for循环
42             for(var i=0;i<lis.length;i++){
43                 //开始给小li设置索引号
44                 lis[i].setAttribute("index", i);
45                 //绑定事件
46                 lis[i].onclick=function(){
47                     //1.上面的模块选项卡，点击某一个，当前选项卡的底色变为红色，其余不变（排他思想）
48                     //先干掉其他
49                     for(var i=0;i<lis.length;i++){
50                         lis[i].className="";
51                     }
52                     //留下自己
53                     this.className="current";
54 
55                     //2.下面的显示内容模块  排他思想
56                     var index=this.getAttribute("index");
57                     for(var i=0;i<items.length;i++){
58                         items[i].style.display="none";   //也可以放在上面的for循环中
59                     }
60                     items[index].style.display="block";
61 
62                 }
63             }
64         </script>
65     </body>
66 </html>