<!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=utf-8" /> <title>Tab切换</title> <style type="text/css"> #tab{width:400px;} #tab ul{ list-style:none;overflow:hidden;margin:0px;padding:0px;} #tab ul li{float:left;padding:5px 10px;border:1px solid #eee;cursor:pointer; } #tab ul li.cur{background-color:green;} #tab .content{width:100%;border:1px solid #eeeeee;height:100px;} </style> <script type="text/javascript"> window.onload=function(){ //所有选项卡标签 var olis = document.getElementsByTagName("li"); for(var i=0;i<olis.length;i++){ olis[i].index = i; olis[i].onmouseover = function(){ for(var j=0;j<olis.length;j++){ document.getElementById("content-"+j).style.display="none"; olis[j].className=""; } document.getElementById("content-"+this.index).style.display="block"; olis[this.index].className="cur"; } } } </script> </head> <body> <div id="tab"> <ul> <li class="cur">tab1</li> <li >tab2</li> <li >tab3</li> </ul> <div id="c-box"> <div class="content" id="content-0">tab-1第一个容器内容</div> <div class="content" id="content-1" style="display:none;">tab-2第二个容器内容</div> <div class="content" id="content-2" style="display:none;">tab-3第三个容器内容</div> </div> </div> </body> </html>
===========================================================================
===========================================================================
script type="text/javascript"> window.onload=function (){ var oDl=document.getElementsByTagName("dl"); var oLi=document.getElementsByTagName("li"); for(var i=0;i<oLi.length;i++){ oLi[i].onmouseover=function(){ for(var j=0;j<oDl.length;j++){ oDl[j].style.display="none"; } var dl=this.getElementsByTagName("dl"); if(dl.length>0){ dl[0].style.display="block"; } } oLi[i].onmouseout=function(){ for(var j=0;j<oDl.length;j++){ oDl[j].style.display="none"; } } } } </script>