tab栏切换制做

时间 2020-07-20

标签 tab 切换制做繁體版

原文原文链接

tab栏切换制做this

先上图spa

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

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

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

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

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

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

代码部分：io

 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>

样式：console

 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>