JS通用代碼:Tab選項卡通用js代碼

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS通用代碼:Tab選項卡通用js代碼

JS通用代碼:Tab選項卡通用js代碼

編輯：關於JavaScript

網頁制作poluoluo文章簡介：JS通用代碼:Tab選項卡通用js代碼.

自己一直在用的 js通用選項卡類：

<!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" content="text/html; charset=gb2312" /> <title>滑動門通用JS</title> <style type="text/css">  </style> <script type="text/javascript"> function scrollDoor(){ } scrollDoor.prototype = { sd : function(menus,divs,openClass,closeClass){ var _this = this; if(menus.length != divs.length) { alert("菜單層數量和內容層數量不一樣!"); return false; } for(var i = 0 ; i < menus.length ; i++) { _this.$(menus[i]).value = i; _this.$(menus[i]).onmouseover = function(){ for(var j = 0 ; j < menus.length ; j++) { _this.$(menus[j]).className = closeClass; _this.$(divs[j]).style.display = "none"; } _this.$(menus[this.value]).className = openClass; _this.$(divs[this.value]).style.display = "block"; } } }, $ : function(oid){ if(typeof(oid) == "string") return document.getElementById(oid); return oid; } } window.onload = function(){ var SDmodel = new scrollDoor(); SDmodel.sd(["m01","m02","m03","m04","m05"],["c01","c02","c03","c04","c05"],"sd01","sd02"); SDmodel.sd(["mm01","mm02","mm03","mm04","mm05"],["cc01","cc02","cc03","cc04","cc05"],"sd01","sd02"); SDmodel.sd(["mmm01","mmm02","mmm03","mmm04","mmm05"],["ccc01","ccc02","ccc03","ccc04","ccc05"],"sd01","sd02"); } </script> </head> <body> <div class="bodyer"> <h1 class="t_rt"> 滑動門封裝類 </h1> <h2> 效果預覽 </h2> <div class="preview"> <div class="scrolldoorFrame"> <ul class="scrollUl"> <li class="sd01" id="m01">滑動門</li> <li class="sd02" id="m02">滑動門</li> <li class="sd02" id="m03">滑動門</li> <li class="sd02" id="m04">滑動門</li> <li class="sd02" id="m05">滑動門</li> </ul> <div class="bor03 cont"> <div id="c01"> 第一層內容 </div> <div id="c02" class="hidden"> 第二層內容 </div> <div id="c03" class="hidden"> 第三層內容 </div> <div id="c04" class="hidden"> 第四層內容 </div> <div id="c05" class="hidden"> 第五層內容 </div> </div> </div> </div> <div class="preview"> <div class="scrolldoorFrame"> <ul class="scrollUl"> <li class="sd01" id="mm01">滑動門</li> <li class="sd02" id="mm02">滑動門</li> <li class="sd02" id="mm03">滑動門</li> <li class="sd02" id="mm04">滑動門</li> <li class="sd02" id="mm05">滑動門</li> </ul> <div class="bor03 cont"> <div id="cc01"> 第一層內容 </div> <div id="cc02" class="hidden"> 第二層內容 </div> <div id="cc03" class="hidden"> 第三層內容 </div> <div id="cc04" class="hidden"> 第四層內容 </div> <div id="cc05" class="hidden"> 第五層內容 </div> </div> </div> </div> <div class="preview"> <div class="scrolldoorFrame"> <ul class="scrollUl"> <li class="sd01" id="mmm01">滑動門</li> <li class="sd02" id="mmm02">滑動門</li> <li class="sd02" id="mmm03">滑動門</li> <li class="sd02" id="mmm04">滑動門</li> <li class="sd02" id="mmm05">滑動門</li> </ul> <div class="bor03 cont"> <div id="ccc01"> 第一層內容 </div> <div id="ccc02" class="hidden"> 第二層內容 </div> <div id="ccc03" class="hidden"> 第三層內容 </div> <div id="ccc04" class="hidden"> 第四層內容 </div> <div id="ccc05" class="hidden"> 第五層內容 </div> </div> </div> </div> </div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

    1.把以上代碼引進你的頁面 <script type="text/javascript" src="scrollDoor.js"></script>

     2.在頁面的"<body>"標簽前加入以下代碼:


            <script type="text/javascript">

            var SDmodel = new scrollDoor();

            SDmodel.sd([菜單id數組],[顯示層id數組],"菜單觸發類","菜單關閉類");

            SDmodel.sd([菜單id數組2],[顯示層id數組2],"菜單觸發類","菜單關閉類");

            SDmodel.sd([菜單id數組3],[顯示層id數組3],"菜單觸發類","菜單關閉類");

            </script>

            其中sd方法中的參數為:

            參數一 [菜單id數組]:滑動門菜單的id

            參數二 [內容id數組]:顯示和隱藏滑動內容層的id

            參數三 "菜單觸發類":鼠標經過滑動門菜單的類

          參數四 "菜單關閉類":鼠標滑出滑動門菜單的類

     3.頁面中有幾個滑動門就調用幾次sd函數,只需改變sd調用的參數,如以上代碼上所展示.

上一頁:jQuery框架實例代碼分析
下一頁:JavaScript腳本的void(0)究竟是何含義

關於JavaScript

Bootstrap3使用typeahead插件實現自動補全功能: 很酷的一個自動補全插件http://twitter.github.io/typeahead.js在b
JavaScript實現的簡單冪函數實例: 本文實例講述了JavaScript實現的簡單冪函數。分享給大家供大家參考。具體實現方法如下：func
JavaScript獲取當前日期是星期幾的使用方法: 本文實例講述了JavaScript獲取當前日期是星期幾的方法。分享給大家供大家參考。具體如下：Jav

JavaScript基礎知識 JSON基礎正則表達式關於JavaScript JavaScript技巧 jQuery入門知識 AJAX入門 JavaScript綜合知識

DIV CSS 佈局教程網

相關文章