本文实例讲述了JS实现简单的tab切换选项卡效果。分享给大家供大家参考，具体如下：
<!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"> <meta charset="UTF-8"> <head> <title>JS自制简单使用的选项卡</title> <style type="text/css"> *{ margin:0px; padding:0px;} #tabWarp{ width:400px; height:300px; border:1px solid #ccc; margin:10px auto;} #tabMenu{ width:400px; height:25px; overflow:hidden; border-bottom:1px solid #ccc; margin-top:5px;} #tabMenu ul li{ width:80px; float:left; list-style:none; font-size:12px; line-height:25px; height:25px; text-align:center; color:#0066CC; cursor:pointer; border-left:1px solid #ccc; border-right:1px solid #ccc; border-top:1px solid #ccc; margin:0px 5px;} #tabMenu ul li.curent{ font-size:13px; background:#FBF5E1; font-weight:bold; color:#FF6600;} #tabContent{ width:390px; height:360px; padding:5px; font-size:12px;} #tabContent .hide{ display:none;} </style> </head> <body> <h1 id="what"></h1> <div id="tabWarp"> <div id="tabMenu"> <ul> <li>中餐</li> <li>西餐</li> <li>亚洲菜</li> <li>河南菜</li> </ul> </div> <div id="tabContent"> <div> <p>中餐的内容</p> </div> <div> <p>西餐的内容</p> </div> <div> <p>亚洲菜的内容</p> </div> <div> <p>河南菜的内容</p> </div> </div> </div> <script> function fgTab(tabNav,tabBody){ var tabMenu=document.getElementById(tabNav); var tabTitle=tabMenu.getElementsByTagName('li'); var tabContent=document.getElementById(tabBody); var tabBody=tabContent.getElementsByTagName('div'); function switchTab(i){ tabTitle[i].onmouseover=function(){ for(j=0; j<tabTitle.length; j++){ if(i==j){ tabTitle[j].className='curent'; tabBody[j].style.display="block"; }else{ tabTitle[j].className=''; tabBody[j].style.display="none"; } } //document.getElementById('what').innerHTML = i+'<br/>'+out(); } } for( i=0; i<tabTitle.length; i++){ switchTab(i); } } function out(){ return i + '<br/>'+j; } </script> <script> fgTab('tabMenu','tabContent'); </script> </body> </html>
运行效果图如下：
希望本文所述对大家JavaScript程序设计有所帮助。