核心提示：选项卡!DOCTYPE htmlhtmlheadmeta charset=UTF-8title选项卡/titlestyle*{margin: 0;padding: 0;}li{list-style: ...
选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
#box1{
width: 600px;
height: 300px;
margin: 20px auto;
border: 1px solid #eaeaea;
}
#box1 ul li{
display: block;
float: left;
width: 200px;
height: 80px;
text-align: center;
line-height: 80px;
background: #EAEAEA;
}
#concent{
text-align: center;
line-height: 120px;
font-size: 20px;
clear: both;
}
#concent p{
display: none;
}
#concent p.active{
display: block;
}
#tab li.red{
background: red;
}
</style>
</head>
<body>
<p id="box1">
<ul id="tab">
<li class="red">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
<p id="concent">
<p class="active">
内容一
</p>
<p>
内容二
</p>
<p>
内容三
</p>
</p>
</p>
<script>
var op=document.getElementById("concent").getElementsByTagName("p");
var oli=document.getElementById("tab").getElementsByTagName("li");
for(var i=0;i<oli.length;i++){
oli[i].index=i;
oli[i].onclick=function(){
for(var i=0;i<oli.length;i++){
oli[i].className='';
op[i].style.display="none";
}
this.className="red"
op[this.index].style.display="block"
}
}
</script>
</body>
</html>
运行结果如下图：
多个选项卡：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多个选项卡</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.tabmenu{
width: 300px;
height: 100px;
margin: 50px auto;
}
.tabmenu ul li{
display: block;
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
float: left;
background: #eee;
cursor: pointer;
}
.tabside{
display: none;
text-align: center;
line-height: 50px;
}
.tabmenu ul li.active{
background: #ff0000;
color: #fff;
}
.tabmenu p.active{
display: block;
border: 1px solid #eaeaea;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
tab("tabmain1","click")
tab("tabmain2","click")
tab("tabmain3","click")
tab("tabmain4","click")
function tab(id,event){
var op=document.getElementById(id);
var oli=op.getElementsByTagName("li");
var obox=op.getElementsByTagName("p");
for(var i=0;i<oli.length;i++){
(function(index){
oli[i].addEventListener(event,function(){
for(var i=0;i<oli.length;i++){
oli[i].className='';
obox[i].style.display='none';
}
this.className="active"
obox[index].style.display='block'
})
})(i)
}
}
}
</script>
<p id="tabmain1" class="tabmenu">
<ul>
<li class="active">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
<p class="tabside active">内容一</p>
<p class="tabside">内容二</p>
<p class="tabside">内容三</p>
</p>
<p id="tabmain2" class="tabmenu">
<ul>
<li class="active">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
<p class="tabside active">内容一</p>
<p class="tabside">内容二</p>
<p class="tabside">内容三</p>
</p>
<p id="tabmain3" class="tabmenu">
<ul>
<li class="active">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
<p class="tabside active">内容一</p>
<p class="tabside">内容二</p>
<p class="tabside">内容三</p>
</p>
<p id="tabmain4" class="tabmenu">
<ul>
<li class="active">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
<p class="tabside active">内容一</p>
<p class="tabside">内容二</p>
<p class="tabside">内容三</p>
</p>
</body>
</html>
运行结果如下图：
