<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>