欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

tab栏切换制作

程序员文章站 2022-06-08 17:57:46
tab栏切换制作 先上图 要求1:默认状态,第一个选项卡被选中,展示第一个选项卡的内容 策略:第一个选项卡默认有被选中的样式,第一个选项卡对应的display: block,其他的dispaly设为none 要求2: 选项卡模块:被点击的变为红底白字,其他的变为白底红字 策略:排他思想,每次点击一个 ......

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>