1.循环为每个小li注册事件，在注册事件之前同时为点击的小li添加自定义属性index用来保存索引号。
2.用排他思想，点击小li后首先循环通过改变className去掉所有按钮背景色（干掉其他人），然后为点击的按钮添加class增加背景色（留下我自己）。
3.循环将下面显示区的display属性设置为none,然后获取你当前点击的li的index属性值，这个索引和下面的div是对应的，最终将这个index对应的div的display属性设置为block就可以了。还是排他思想。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } li{ list-style: none; } .tab{ width: 38%; height: 400px; margin: 100px auto; } .tab_list{ width: 100%; height: 36px; background-color: #f7f7f7; border: 1px solid #eee; border-bottom: 1px solid #e4393c; } .current { background-color: #e4393c; color: #fff; } .tab_list li{ font: 14px Microsoft YaHei; display: inline-block; padding:9px 25px; } .tab_list li:hover{ cursor: pointer; } .tab_con{ width: 100%; height: 360px; border: 1px solid #eee; border-top: none; } .tab_con .item{ height: 100%; display: none; font-size: 13px; text-indent: 13px; } </style> </head> <body> <div class="tab"> <div class="tab_list"> <ul> <li class="current">商品介绍</li> <li>规格与包装</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 class="item"> 手机社区 </div> </div> </div> <script> var lis = document.querySelector('.tab_list').querySelectorAll('li'); var divs = document.querySelector('.tab_con').querySelectorAll('div'); for (var i=0;i<lis.length;i++){ lis[i].setAttribute('index',i); //给5个小li设置索引号 lis[i].onclick = function(){ // 1.上面的模块选项卡，点击一个，他的底色变成红色 // 排他思想 // 消除所有人 for (var j=0;j<lis.length;j++){ lis[j].className = ''; } // 保留我自己 this.className = 'current'; //this 指向事件函数的调用者 // 2.下面的显示内容模块 for (var k=0;k<divs.length;k++){ // 消除所有人 divs[k].style.display = 'none'; } var index = this.getAttribute('index'); // 保留我自己 divs[index].style.display = 'block'; } } </script> </body> </html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script> $(function(){ $(".tab_list li").click(function(){ $(".tab_list li").removeClass("current"); //干掉所有人 $(this).addClass("current"); //留下我自己 var index = $(this).index(); $(".tab_con .item").hide(); //干掉所有人 $(".tab_con .item").eq(index).show(); //留下我自己 }); });
