JS实现简单的tab切换选项卡效果

2019-11-20 08:55:44

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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 class="curent">中餐</li>     <li>西餐</li>     <li>亚洲菜</li>     <li>河南菜</li>    </ul>  </div>  <div id="tabContent">   <div>     <p>中餐的内容</p>   </div>   <div class="hide">     <p>西餐的内容</p>   </div>   <div class="hide">     <p>亚洲菜的内容</p>   </div>   <div class="hide">     <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>

运行效果图如下：