<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{ margin: 0;padding: 0; }
#div1{width: 400px;height: 400px; border: 1px solid #f00; position: relative;}
#div1 ul{ width: 100%; height: 30px; }
#div1 ul li{ float: left; background: #ccc;width:32%;text-align:center; margin: 0 1px; height: 30px; line-height: 30px; }
#div1 ul li.active{ background: #f00 }
#div1 div{width: 400px; position: absolute; top: 30px; background:#f2f2f2;left: 0;width: 400px;height: 370px;}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<script>
//js实现tab切换
window.onload=function () {
var oDiv=document.getElementById('div1');
var aLi=oDiv.getElementsByTagName('li');
var aDiv=oDiv.getElementsByTagName('div');
for(var i=0;i<aLi.length;i++){
aLi[i].index=i;//索引 写在循环前面
aLi[i].onclick=function () {
//给样式前的清空其他样式
for(var i=0;i<aLi.length;i++){
aLi[i].className='';
aDiv[i].style.display = 'none'
}
this.className='active'
aDiv[this.index].style.display = 'block'
}
}
}
</script>
</head>
<body>
<div id="div1">
<ul>
<li class="active">11</li>
<li>22</li>
<li>33</li>
</ul>
<div>11</div>
<div>22</div>
<div>33</div>
</div>
</body>
</html>
