js實現簡潔的TAB滑動門效果代碼，jstab滑動門代碼

最後更新：2015-09-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本文執行個體講述了js實現簡潔的TAB滑動門效果代碼。分享給大家供大家參考。具體如下：

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

運行效果如所示：

線上示範地址如下：

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;//賦值指定節點的父節點的id名字  var tabList = document.getElementById(tabObj).getElementsByTagName("li");  for (i = 0; i < tabList.length; i++) {//點擊之後，其他tab變成灰色，內容隱藏，只有點擊的tab和內容有屬性  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">  第一塊內容</div>  <div id="myTab_Content1" class="none">  第二塊內容</div>  <div id="myTab_Content2" class="none">  第三塊內容</div>  <div id="myTab_Content3" class="none">  第四塊內容</div> </div> </div></body></html>

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More