|
阅读：3546回复：1
tab切换栏 2023.1.17<style> .tab { display: flex; flex-direction: column; } .tab_list { background-color: rgba(240, 248, 255, 0.662); } .item { display: none; } .tab_list li { float: left; height: 39px; line-height: 39px; padding: 0 20px; text-align: center; cursor: pointer; } .tab_list .current { background-color: red; color: white; } .item_info { padding: 20px 0 0 20px; } </style> </head> <body> tab栏切换 <div class="tab"> <div class="tab_list"> <ul> <li class="current">商品介绍</li> <li>规格与包装</li> <li>售后保障</li> <li>手机社区</li> </ul> </div> <div class="tab_con"> <div class="item" style="display: block">商品介绍</div> <div class="item">规格包装</div> <div class="item">售后保障</div> <div class="item">手机社区</div> </div> </div> <script> let tab_list = document.querySelector(".tab_list"); let lis = tab_list.querySelectorAll("li"); let items = document.querySelectorAll(".item"); //点击某一个，当前变，其余不变（排他思想） for (let i = 0; i < lis.length; i++) { //开始给小li设置索引号 lis[i].setAttribute("index", i); lis[i].onclick = function () { //干掉所有人 其余li清除 class这个类 for (let i = 0; i < lis.length; i++) { lis[i].className = ""; } //留下我自己 this.className = "current"; //2、下面的内容显示模块 给上面的tab_list里面的所有小li添加自定义属性，属性从0开始编号 let index = this.getAttribute("index"); console.log(index); //排他思想 干掉其余人 留下自己 for (let i = 0; i < items.length; i++) { items[i].style.display = "none"; } items[index].style.display = "block"; }; } </script> </body> |
|
|
沙发#
发布于：2023-01-18 10:30
666
|
|
|
