这是一个重点案例，是前端人员的必备技能！！你必须要把这个案例给写会！！！！
案例分析
①Tab栏切换有2个大的模块
②上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式
③下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。
④规律：下面的模块显示内容和上面的选项卡一一对应，相匹配。
⑤核心思路： 给上面的tab_list 里面的所有小li 添加自定义属性，属性值从0开始编号。
（这个案例里面用到了自定义属性！！！！！！！！！！！！！！）
⑥ 当我们点击tab_list 里面的某个小li，让tab_con 里面对应序号的 内容显示，其余隐藏（排他思想）
<script> var tab_list = document.querySelector('.tab_list'); var lis = tab_list.querySelectorAll('li'); for(var i = 0; i < lis.length; i++){ lis[i].onclick = function(){ for(var j = 0; j < lis.length; j++){ lis[j].className = ''; } this.className = 'current'; } } </script>这个是做上面的模块所用的样式代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>document</title> <style> * { margin: 0; padding: 0; } li { list-style-type: none; } .tab { width: 978px; margin: 100px auto; } .tab_list { height: 39px; border: 1px solid #ccc; background-color: #f1f1f1; } .tab_list li { float: left; height: 39px; line-height: 39px; padding: 0 20px; text-align: center; cursor: pointer; } .tab_list .current { background-color: #c81623; color: #fff; } .item { display: none; } </style></head><body> <!--大盒子叫tab,里面有上下2个盒子，一个叫tab_list，一个叫tab_con--> <!--tab_list里面有5个li--> <!--tab_con里面有5个div--> <!--5个li和5个div是一一对应的关系--> <div class="tab"> <div class="tab_list"> <ul> <li class="current">商品介绍</li> <li>规格与包装</li> <li>售后保障</li> <li>商品评价（50000）</li> <li>手机社区</li> </ul> </div> <div class="tab_con"> <!-- block除了有转为块级元素以外，还有显示的意思 --> <!-- 行内元素层级高，把上面的display:none给覆盖了 --> <div class="item" style="display: block;"> 商品介绍模块内容 </div> <div class="item"> 规格与包装模块内容 </div> <div class="item"> 售后保障模块内容 </div> <div class="item"> 商品评价（50000）模块内容 </div> <div class="item"> 手机社区模块内容 </div> </div> </div> <script> //1. 上的模块选项卡:点击某一个,当前这一个底色会是红色,其余不变(排他思想) 修改类名的方式 // 获取元素 var tab_list = document.querySelector('.tab_list'); var lis = tab_list.querySelectorAll('li'); var items = document.querySelectorAll('.item'); //里面有5个小li,必定要用循环 //for循环绑定点击事件 for(var i = 0; i < lis.length; i++){ //开始给5个小li设置一个自定义属性：索引号index lis[i].setAttribute('index',i) //所有的孩子都要有onclick绑定事件 lis[i].onclick = function(){ //排他思想：干掉所有人，其余的li清除class这个类 for(var i = 0; i < lis.length; i++){ lis[i].className = ''; } //留下我自己 this.className = 'current'; //2.下面的显示内容模块 //得到当前的属性的值 var index = this.getAttribute('index'); // console.log(index); //再用一次排他思想：干掉所有人，让其余的item 这些div隐藏 for(var j = 0; j < items.length; j++){ items[j].style.display = 'none'; } //留下我自己 让对应的item显示出来 items[index].style.display = 'block'; } } </script></body></html>这个是2个模块都完成的最终代码。(这个我独立写我也写不出来)
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）