<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style> body,ul{margin:0;padding:0;} li{list-style:none;} #tab{width:216px;margin:30px auto;} #tab ul{width:216px;height:32px;} #tab li{float:left;width:60px;height:24px;text-align:center;font-size:14px;line-height:24px;margin-left:10px;border:1px solid #000;background:#CCCCCC} #tab .active{background:#FFFF00;} #tab div{width:224px;height:200px;background:#CCCCCC;display:none;} #tab .show{display:block;} </style> <script> window.onload =function(){ var oDiv = document.getElementById('tab'); var aLi = oDiv.getElementsByTagName('li'); var aDiv = oDiv.getElementsByTagName('div'); var lastIndex = 1; for(var i=0;i<aLi.length;i++){ aLi[i].index = i; aLi[i].onclick = function(){ /*方法- for(var j=0;j<aLi.length;j++){ aLi[j].className = ''; aDiv[j].style.display = 'none'; } */ /*方法二*/ aLi[lastIndex].className = ''; aDiv[lastIndex].style.display = 'none'; this.className = 'active'; aDiv[this.index].style.display = 'block'; lastIndex = this.index; }; } }; </script> </head> <body> <div id='tab'> <ul> <li>port端口</li> <li class='active'>静态Mac</li> <li>vlan列表</li> </ul> <div class='hide'>interface gig1/1/1</div> <div class='show'>mac 0001.0002.0004</div> <div class='hide'>vlan 1 2 3</div> </div> </body> </html>