js實現(xiàn)簡潔的TAB滑動門效果代碼

更新時間：2015年09月06日 10:24:52 作者：企鵝

這篇文章主要介紹了js實現(xiàn)簡潔的TAB滑動門效果代碼,通過簡單的JavaScript自定義函數(shù)動態(tài)遍歷頁面元素實現(xiàn)tab滑動切換的功能,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了js實現(xiàn)簡潔的TAB滑動門效果代碼。分享給大家供大家參考。具體如下：

這是一款滑動門代碼，簡潔TAB，簡單的鼠標導航效果，大家或許經(jīng)常見到的效果啦，鼠標放在主菜單上，下邊框架內(nèi)的內(nèi)容會跟著變換，鼠標不需要點擊，只需要滑上去就可切換內(nèi)容，像一扇門，所以有時候別人叫“滑動門”菜單。

運行效果如下圖所示：

在線演示地址如下：

http://demo.jb51.net/js/2015/js-tab-simple-cha-style-codes/

具體代碼如下：

<html>
<head>
 <title>簡潔TAB</title>
 <script type="text/javascript">
 function nTabs(thisObj, Num) {
  if (thisObj.className == "active") return;
  var tabObj = thisObj.parentNode.id;//賦值指定節(jié)點的父節(jié)點的id名字
  var tabList = document.getElementById(tabObj).getElementsByTagName("li");
  for (i = 0; i < tabList.length; i++) {//點擊之后，其他tab變成灰色，內(nèi)容隱藏，只有點擊的tab和內(nèi)容有屬性
  if (i == Num) {
   thisObj.className = "active";
   document.getElementById(tabObj + "_Content" + i).style.display = "block";
  } else {
   tabList[i].className = "normal";
   document.getElementById(tabObj + "_Content" + i).style.display = "none";
  }
  }
 }
 </script>
 <style type="text/css">
 *
 {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
 }
 .nTab
 {
  width: 500px;
  height:200px;
  margin: 20px auto;
  border: 1px solid #333;
  overflow: hidden;
 }
 .none
 {
  display: none;
 }
 .nTab .TabTitle li
 {
  float: left;
  cursor: pointer;
  height: 35px;
  line-height: 35px;
  font-weight: bold;
  text-align: center;
  width: 124px;
 }
 .nTab .TabTitle li a
 {
  text-decoration: none;
 }
 .nTab .TabTitle .active
 {
  background-color:blue;
  color: #336699;
 }
 .nTab .TabTitle .normal
 {
  color: #F1AC1C;
 }
 .nTab .TabContent
 {
  clear: both;
  overflow: hidden;
  background: #fff;
  padding: 5px;
  display: block;
  height:100px;
 }
 </style>
</head>
<body>
 <div class="nTab">
 <div class="TabTitle">
  <ul id="myTab">
  <li class="active" onmouseover="nTabs(this,0);">ASP</li>
  <li class="normal" onmouseover="nTabs(this,1);">PHP2</li>
  <li class="normal" onmouseover="nTabs(this,2);">PHP3</li>
  <li class="normal" onmouseover="nTabs(this,3);">PHP4</li>
  </ul>
 </div>
 <div class="TabContent" >
  <div id="myTab_Content0">
  第一塊內(nèi)容</div>
  <div id="myTab_Content1" class="none">
  第二塊內(nèi)容</div>
  <div id="myTab_Content2" class="none">
  第三塊內(nèi)容</div>
  <div id="myTab_Content3" class="none">
  第四塊內(nèi)容</div>
 </div>
 </div>
</body>
</html>

希望本文所述對大家的JavaScript程序設計有所幫助。

您可能感興趣的文章: