tab栏切换制作

tab栏切换制作

先上图

要求1：默认状态，第一个选项卡被选中，展示第一个选项卡的内容

策略：第一个选项卡默认有被选中的样式，第一个选项卡对应的display: block，其他的dispaly设为none

要求2: 选项卡模块：被点击的变为红底白字，其他的变为白底红字

策略：排他思想，每次点击一个选项卡时，先把其他选项卡设为默认样式，然后自己设为被选中的样式。这里我们先在style里面设置一个新的class,把这个样式给被选中的选项卡。

要求3：每点击某个选中卡，出现对应的模块内容，点击第一个li，展示第一个div,点击第几个li，展示第几个div......，如何知道选中了第几个li呢?

策略：利用for循环，给每个li设置一个自定义属性，每点击这个li，得到该liindex的属性的值

代码部分：

 1 <body>
 2     <div class="con">
 3         <div class="tab_list">
 4             <ul>
 5                 <!-- 第一个默认被选中 -->
 6                 <li class="tabChange">商品介绍</li>
 7                 <li>规格与包装</li>
 8                 <li>售后保障</li>
 9                 <li>商品评价</li>
10             </ul>
11         </div>
12         <div class="tab_containt">
13             <div style="display: block">商品介绍模块</div>
14             <div>规格与包装模块</div>
15             <div>售后保障模块</div>
16             <div>商品评价模块</div>
17         </div>
18     </div>

样式：

 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部分：

 1    <script>
 2         // 切换选项卡时选项卡模块：被点击的变为红底白字，其他的变为白底红字,所以要用到排他思想
 3         var lis = document.querySelector(".tab_list").querySelectorAll("li");
 4         var items = document.querySelector(".tab_containt").querySelectorAll("div");
 5         //console.log(items);
 6 
 7         //console.log(lis);
 8         //给所有的li注册点击事件
 9         for (var i = 0; i < lis.length; i++) {
10             // 点击第一个li，展示第一个div,点击第几个li，展示第几个div......this
11             // 那么我们如何知道点击了第几个li呢？思路：给li设置一个自定义属性，那么如何给5个li都设置带有编号的index呢，当然用for循环啦
12             lis[i].setAttribute("index", i);
13             lis[i].onclick = function() {
14                 //console.log("dianij");
15                 //排他
16                 for (var i = 0; i < lis.length; i++) {
17                     lis[i].className = "";
18                 }
19                 //成就自己
20                 this.className = "tabChange";
21                 //得到选项卡的index属性值
22                 var index = this.getAttribute("index");
23                 //console.log(index);
24 
25                 //先排他思想，清除其他的内容显示第index个div的内容
26                 for (var i = 0; i < items.length; i++) {
27                     items[i].style.display = "none";
28                 }
29                 //使第index个盒子的内容显示
30                 items[index].style.display = "block";
31 
32             }
33         }
34     </script>

猜你喜欢