網(wǎng)頁(yè)特效代碼模板無(wú)憂>網(wǎng)頁(yè)特效>層和布局特效代碼>

簡(jiǎn)潔滑動(dòng)門(Tab)_層和布局特效

一個(gè)超簡(jiǎn)潔的JS滑動(dòng)門Tab，用較少的代碼實(shí)現(xiàn)了實(shí)用的功能，你可以把此當(dāng)作一個(gè)制作滑動(dòng)門的教程，其實(shí)萬(wàn)變不離其蹤，幾乎所有的滑動(dòng)門及TAB都是這樣實(shí)現(xiàn)的。

<!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" mrc="text/html; charset=gb2312" />
<title>滑動(dòng)TAB</title>
<script language="javascript">
function tabChange(obj,id)
{
 var arrayli = obj.parentNode.getElementsByTagName("li"); //獲取li數(shù)組
 var arrayul = document.getElementById(id).getElementsByTagName("ul"); //獲取ul數(shù)組
 for(i=0;i<arrayul.length;i++)
 {
  if(obj==arrayli[i])
  {
   arrayli[i].className = "cli";
   arrayul[i].className = "";
  }
  else
  {
   arrayli[i].className = "";
   arrayul[i].className = "hidden";
  }
 }
}
</script>
<style type="text/css">
.tabbox {width:300px;height:250px;}
.tabmenu {width:295px;height:28px;border-left:1px solid  #CCC;border-top:1px solid #ccc;}
.tabmenu ul {margin:0;padding:0;list-style-type: none;}
.tabmenu li { text-align:center; float:left; display:block; width:58px; height:27px; overflow:hidden; background-color: #D2E8F7; line-height:27px; border-right:#ccc 1px solid; border-bottom:#ccc 1px solid; display:inline; font-size:12px;}
.tabmenu .cli {text-align:center;float:left;display:block;width:58px;height:27px;overflow:hidden;background-color: #fff;line-height:27px;border-right:#ccc 1px solid;border-bottom:#fff 1px solid;display:inline;font-size:12px; cursor:pointer;}
#tabmrc {width:294px;background-color:#fff;border-left:#CCC 1px solid;border-right:#CCC 1px solid;border-bottom:#CCC 1px solid;}
#tabmrc ul {margin:0;padding:5px;list-style-type: none;}
#tabmrc .hidden {display:none;}
</style>
</head>
<body>
 <div class="tabbox">
  <div class="tabmenu">
   <ul>
    <li onmouseover="tabChange(this,'tabmrc')" class="cli">最新下載</li>
    <li onmouseover="tabChange(this,'tabmrc')">網(wǎng)站代碼</li>
    <li onmouseover="tabChange(this,'tabmrc')">源碼下載</li>
    <li onmouseover="tabChange(this,'tabmrc')">網(wǎng)頁(yè)特效</li>
    <li onmouseover="tabChange(this,'tabmrc')">電子書籍</li>
   </ul>
  </div>
  <div id="tabmrc">
   <ul name="tabul">
    <li><a href="#">最新更新下載，歡迎訪問(wèn)。</a></li>
   </ul>
   <ul class="hidden">
    <li><a href="#">網(wǎng)站代碼</a></li>
   </ul>
   <ul class="hidden">
    <li><a href="#">精品高質(zhì)量學(xué)習(xí)型源碼</a></li>
   </ul>
   <ul class="hidden">
    <li><a href="#">網(wǎng)頁(yè)特效，你喜歡嗎？</a></li>
   </ul>
   <ul class="hidden">
    <li><a href="#">電子書，助你學(xué)習(xí)天天向上。</a></li>
   </ul>
  </div>
 </div>
</body>
</html>

所屬頻道：層和布局特效/更新時(shí)間：2012-11-16

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)層和布局特效：

簡(jiǎn)潔滑動(dòng)門(Tab)_層和布局特效

層和布局特效Rss訂閱特效代碼搜索

層和布局特效推薦

猜你也喜歡看這些