选项卡
显现效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
#box{
position: relative;
width: 500px;
height: 500px;
border:1px solid red;
margin: 100px auto;
}
#header{
height: 50px;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
}
li{
list-style: none;
}
#header li{
width: 98px;
height: 48px;
border:1px solid black;
float: left;
text-align: center;
line-height: 50px;
color: lightblue;
font-size: 20px;
cursor: pointer;
}
#header .header_i1{
background-color: red;
}
#content{
width: 500px;
height: 450px;
position: absolute;
left: 0;
top: 50px;
}
#content .content_i1{
position: absolute;
left: 0;
top: 0;
background-color: pink;
width: 498px;
height: 448px;
border:1px solid black;
line-height: 448px;
font-size: 50px;
color: red;
text-align: center;
}
</style>
<body>
<div id="box">
<ul id="header">
<li class="header_i1">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul id="content">
<li class="content_i1">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script>
var lis=document.getElementById("header").getElementsByTagName("li");
var liss=document.getElementById("content").getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].index=i;// 定义一个自定义属性，将每个i值赋给index，以便之后的计算
lis[i].onclick=function(){
for(var i=0;i<liss.length;i++){
lis[i].className="";// 清空头部所有的样式
liss[i].className="";// 清空内容所有的样式
}
this.className="header_i1";
// this指的是lis[i]
liss[this.index].className="content_i1";
// this.index指的就是i——原因：若我们在前面不将i的值赋给一个自定义变量，那么在执行for循环时直接结束，而不会执行我们需要的某个i里面的内容
// console.log(this.index)
}
// console.log(this)这里的this指的是window
// console.log(lis[i].index)
}
</script>
</body>
</html>
