<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>tab选项卡</title>
<style>
* {
margin:0 auto;
padding:0 auto;
}
.tabBox {
margin: 20px auto;
width:500px;
}
.tabBox ul {
position:relative;
top:1px;
right:40px;
/* 相对于之前的位置向下移动1px,使边框重合 */
}
.tabBox ul li {
display: inline-block;
/* 同一行，块标签 */
margin-right:10px;
padding:0 10px;
line-height: 33px;
border:1px solid #AAA;
cursor: pointer;
}
.tabBox ul li.active {
color:lightcoral;
font-weight:bold;
border-bottom-color:#fff;
/* 当前li的边框覆盖率div的边框，我们让li的下边框为背景颜色白色，这样看上去就像没边框 */
}
.tabBox div {
display: none;
line-height: 148px;
text-align: center;
border:1px solid #AAA;
}
.tabBox div.active {
display: block;
/* div .active加空格是后代筛选，先搜索div在div中筛选，div .active不加空格当前div标签的二次筛选，同级筛选 */
}
</style>
</head>
<body>
<!-- div.tabBox#tabBox>(ul>li*3)+(div*3) [Tab]在括号前按下Tab键多行添加标签 -->
<!-- 整体大盒子 -->
<div class="tabBox" id="tabBox">
<!-- 上面三个tab签 -->
<ul>
<li class="active">新闻</li>
<li>音乐</li>
<li>电影</li>
</ul>
<!-- tab对应切换的内容 -->
<div class="active">金三胖访华</div>
<div>需要你陪</div>
<div>复仇者联盟</div>
</div>
<script>
// 思路：1.给所以的ul绑定点击事件，当点击任何一个li的时候，都做第二步操作
// 2.可以先让所以的li && div的class都为空（xxx.className=''）, 再让当前点击的这个li和对应的div有className这个样式类即可
//获取id为tabBox的所有li和div
var tabBox = document.getElementById('tabBox');
var tabList = tabBox.getElementsByTagName('li');
var divList = tabBox.getElementsByTagName('div');
//重复操作用循环
//=>自定义属性方式
for (var i = 0; i < tabList.length; i++) {
//=>每一轮循环的时候，给每一个li设置一个自定义属性‘zzzz’,存储的值是各自的索引
// TAB-List
// {
// 0:{zzzIndex:0,...},
// 1:{zzzIndex:1,...},
// 2:{zzzIndex:2,...},
// length:3
// }
tabList[i]['zfIndex'] = i ;
console.dir(tabList)
tabList[i].onclick = function() {
//this:代表的是当前点击的这个li
changeTab(this.zfIndex); //=>需要索引
}
}
//*不行的代码
// for (var i = 0; i < tabList.length; i++) {
// // tabList[i] 每一轮循环当前要操作的li对象，i是变量索引
// tabList[i].onclick = function() {
// //=>给当前元素某一个事件绑定一个方法，绑定的时候方法没有执行（属于创建）当在页面中手动触发点击事件的时候绑定的方法就会执行
// // i=0 tabList[0].onclick=function..
// // i=1 tabList[1].onclick=function...
// // i=2 tabList[2].onclick=function...
// alert(i);
// changeTab(i);//=>需要把当前点击的这个li的索引传递进来
// //分析：第一次循环
// // i=0 tabList[0].onclick = function (){
// // "changeTab(i);"
// // };
// // i++ 第二次循环
// // i=1 i=0 tabList[1].onclick = function (){
// // "changeTab(i);"
// // };
// // i++ 第三次循环
// // i=2 i=0 tabList[2].onclick = function (){
// // "changeTab(i);"
// // };
// // i++
// // i=3 循环结束
// }
// }
//=>第二中不用循环的方法
// tabList[0].onclick = function (){
// changeTab(0);
// }
// tabList[1].onclick = function (){
// changeTab(1);
// }
// tabList[2].onclick = function (){
// changeTab(2);
// }
//=>封装一个方法完成页卡切换
function changeTab(n){
//=>n:形参变量，当执行这个方法的时候，会把当前点击的这个li的索引传递过来
//=>1.清空所有选中样式
for (var i = 0 ; i < tabList.length; i++){
tabList[i].className = '';
divList[i].className = '';
}
//=>2.当前点击的有选中样式
tabList[n].className='active';
divList[n].className='active';
}
</script>
</body>
</html>