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