JS 实现Tab栏切换
实现
实现如图所示的Tab栏切换，点击对应的 tab 出现对应的内容，同时该点击的 tab 背景颜色为红：
分析
- 首先建立一个大的 div 里面包含两个盒子
- 第一个盒子里面放 tab 栏
- 第二个盒子里面放相应的内容
<div class="tab"> <!-- tab栏--> <div class="tab_list"> <ul> <li class="current">每日推荐</li> <li>歌单</li> <li>主播电台</li> <li>排行榜</li> <li>歌手</li> </ul> </div> <!-- tab栏内容--> <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>
JS思想实现
利用排他思想：通过 for循环遍历存放 li 数组中的元素，进入循环之后首先消除所有部分的样式，接着再为当前所点击的 li 添加样式。
代码如下：
<head> <meta charset="UTF-8"> <title>Tab栏切换</title> <style> *{ margin: 0; padding: 0; } .tab{ width:800px; height:45px; border:1px solid #ccc; border-bottom:1px solid #c81623; background: #fafafa; position:relative; margin:100px auto; } .tab_list li{ width:160px; height:45px; list-style:none; line-height:45px; font-size: 15px; text-align: center; float:left; } .tab_list .current{ background-color:#c81623; color:#fff; } .item{ position:absolute; top:47px; width:800px; height: 200px; padding-top:40px; font-size: 25px; color:#fff; text-align: center; text-shadow:2px 2px 4px #000000; background: #efefef; display: none; /*这里注意*/ } </style> </head> <body> <div class="tab"> <!-- tab栏--> <div class="tab_list"> <ul> <li class="current">每日推荐</li> <li>歌单</li> <li>主播电台</li> <li>排行榜</li> <li>歌手</li> </ul> </div> <!-- tab栏内容--> <div class="tab_con"> <!-- 默认第一个tab下的内容显示--> <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 tab_list = document.querySelector('.tab_list'); var lis = tab_list.querySelectorAll('li'); var items = document.querySelectorAll('.item');
//for循环绑定事件 for(let i=0;i < lis.length;i++){ // setAttribute() 方法添加指定的属性，并为其赋指定的值。 lis[i].setAttribute('index',i); //此点击事件是一个回调函数 lis[i].onclick = function () { //把所有li的类选择器置空 for(var i=0;i < lis.length;i++){ lis[i].className = ''; } //给当前点击的li添加样式.current this.className = 'current'; //下面显示内容模块 var index = this.getAttribute('index'); console.log(i); //去掉其他的 item，让这些隐藏起来 //只留下当前的 item，让它显示出来 for(var i=0;i<items.length;i++){ items[i].style.display = 'none'; } items[index].style.display = 'block'; } } </script> </body>
