快捷導(dǎo)航

JS實(shí)現(xiàn)簡(jiǎn)單的tab切換選項(xiàng)卡效果

更新時(shí)間：2016年09月21日 08:51:41 作者：webdm

這篇文章主要介紹了JS實(shí)現(xiàn)簡(jiǎn)單的tab切換選項(xiàng)卡效果,涉及javascript結(jié)合鼠標(biāo)事件對(duì)頁面元素屬性動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)簡(jiǎn)單的tab切換選項(xiàng)卡效果。分享給大家供大家參考，具體如下：

<!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自制簡(jiǎn)單使用的選項(xiàng)卡</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>中餐的內(nèi)容</p>
   </div>
   <div class="hide">
     <p>西餐的內(nèi)容</p>
   </div>
   <div class="hide">
     <p>亞洲菜的內(nèi)容</p>
   </div>
   <div class="hide">
     <p>河南菜的內(nèi)容</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>

運(yùn)行效果圖如下：