基于JavaScript實現通用tab選項卡(通用性強)

2019-11-20 10:50:40

字體：大中小

來源：轉載

供稿：網友

選項卡在大量的網站都有應用，雖然形式各有不同，但是索要達成的目的都是一樣的，一般都是為了進行分類或者節省網頁空間只用，算是一件利器，下面就是一個選項卡的代碼實例，通用性很強，下面就和大家分享一下。

代碼實例如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.companysz.com/" /><title>js實現的可以通用的選項卡代碼實例</title><style type="text/css">body {text-align:center;}.tab1, .tab2 {width:350px;margin:0 5px;background:#CC9933;opacity:0.5;border-radius:5px 5px 5px 5px;box-shadow:#CCC 4px 4px 4px;text-align:left;float:left;display:inline;}.name {list-style:none;overflow:hidden;}.name li {width:90px;font:bold 16px/30px Verdana, Geneva, sans-serif;background:#669900;text-align:center;border-radius:5px 5px 5px;margin-right:5px;float:left;display:inline;cursor:pointer;}li.selected{background:#FF9900;}.content li {height:500px;display:none;}</style><script type="text/javascript">/** * 事件處理通用函數*/var EventUtil={getEvent:function(event){return event ? event : window.event;},getTarget:function(event){return event.target||event.srcElement;},addHandler:function(element,type,handler){if(element.addEventListener){element.addEventListener(type,handler,false);}else if(element.attachEvent){element.attachEvent("on"+type,handler);}else{element["on"+type] = handler;} }};/*** 選項卡通用函數*/// 傳入參數inClassName設定為綁定的選項卡類名，參數triggerType設定為觸發切換的類型function tabSwitch(inClassName,triggerType){//取得全部選項卡區域if(document.querySelectorAll){var tabs=document.querySelectorAll("."+inClassName);}else{var divs=document.getElementsByTagName("div");var tabs = new Array();for(var k=0,lenDiv=divs.length;k<lenDiv;k++){if(divs[k].className.indexOf(inClassName)>-1){tabs.push(divs[k]);}}}//為每個選項卡建立切換功能for(var j=0,len=tabs.length; j<len; j++){//獲取標題和內容列表var tab = tabs[j];//使用私有作用域為每個選項卡建立切換(function(){var nameUl = tab.getElementsByTagName("ul")[0];var content = tab.getElementsByTagName("ul")[1];//初始化選項卡nameUl.getElementsByTagName("li")[0].className = "selected";content.getElementsByTagName("li")[0].style.display = "block";//添加事件委托EventUtil.addHandler(nameUl,triggerType,function(event){//獲取事件對象event = EventUtil.getEvent(event);var target = EventUtil.getTarget(event);//選項卡切換if(target.nodeName.toLowerCase() == "li"){//分別取得標題列表項和內容列表項var nameList = nameUl.getElementsByTagName("li");var contentList = content.getElementsByTagName("li");//標題添加selected類，并顯示內容for(var i=0,len=nameList.length; i<len; i++){nameList[i].className = "";contentList.style.display = "none";if(nameList == target){nameList.className = "selected";contentList.style.display = "block";}}}});})();}}window.onload=function(){//設置選項卡切換方式tabSwitch("tab1","click");tabSwitch("tab2","mouseover");}</script></head><body><div class="tab1"><ul class="name"><li>項目一</li><li>項目二</li><li>項目三</li></ul><ul class="content"><li>類為<em>"tab1"</em>項目一內容,通過<em>"click"</em>觸發</li><li>類為<em>"tab1"</em>項目二內容,通過<em>"click"</em>觸發</li><li>類為<em>"tab1"</em>項目三內容,通過<em>"click"</em>觸發</li></ul></div><div class="tab1"><ul class="name"><li>項目一</li><li>項目二</li><li>項目三</li></ul><ul class="content"><li>類為<em>"tab1"</em>項目一內容,通過<em>"click"</em>觸發</li><li>類為<em>"tab1"</em>項目二內容,通過<em>"click"</em>觸發</li><li>類為<em>"tab1"</em>項目三內容,通過<em>"click"</em>觸發</li></ul></div><div class="tab2"><ul class="name"><li>項目一</li><li>項目二</li><li>項目三</li></ul><ul class="content"><li>類為<em>"tab2"</em>項目一內容,通過<em>"mouseover"</em>觸發</li><li>類為<em>"tab2"</em>項目二內容,通過<em>"mouseover"</em>觸發</li><li>類為<em>"tab2"</em>"項目三內容,通過<em>"mouseover"</em>觸發</li></ul></div></body></html>

以上代碼實現了選項卡的功能，下面就簡單介紹一下實現過程。

一.實現原理:

看上去代碼一大堆，其實原理非常的簡單，咱們這里只簡單的介紹一下原理，具體可以參閱代碼注釋依靠自己的思考。在默認狀態選項卡的標題是顯示的，并且第一個標題并賦予指定的樣式類，選項卡內容只有第一個是顯示的，其他的都出于隱藏狀態，這樣就實現了，默認狀態下第一個被選中的效果。每一個選項卡標題都會被注冊指定的事件處理函數，當進行點擊或者劃過操作時候，能夠實現相應的切換，主要是通過遍歷實現的，這里不多介紹了，參閱代碼注釋吧。

二.代碼注釋:

1.var EventUtil={}，聲明了一個對象直接量，它的內部實現了獲取事件對象，事件源對象和事件處理函數綁定的操作，并且兼容了各大瀏覽器。
2. getEvent:function(event){return event ? event : window.event;}，獲取事件對象，兼容各大瀏覽器。
3.getTarget:function(event){return event.target||event.srcElement;}，獲取事件源對象，兼容各大瀏覽器。
4.addHandler:function(element,type,handler){}，注冊事件處理函數兼容各大瀏覽器。
5.function tabSwitch(inClassName,triggerType){}，此函數可以為指定的對象注冊指定事件處理函數，具有兩個參數，第一個參數是樣式類名稱，用來獲取具有此類名的對象，第二個是事件類型。
6.if(document.querySelectorAll)，用來判斷瀏覽器是否支持querySelectorAll函數。
7.var tabs=document.querySelectorAll("."+inClassName)，如果支持則獲取具有指定類名稱的對象。
8.var divs=document.getElementsByTagName("div")，獲取div對象集合。
9.var tabs=new Array()，創建一個數組，用語存儲具有指定樣式類的div對象。
10.for(var k=0,lenDiv=divs.length;k<lenDiv;k++)，遍歷獲取的div對象集合。
11.if(divs[k].className.indexOf(inClassName)>-1)，如果div的樣式類名稱含有指定的樣式類名稱。
12. tabs.push(divs[k])，將此div存入數組。
13.for(var j=0,len=tabs.length;j<len;j++)，遍歷存有div的數組，在本例中也就是class屬性值為tab1和tab2的div。
14.var tab=tabs[j]，將一個div對象的引用賦值給tab。
15.(function(){})()，聲明一個匿名函數，并執行。
16.var nameUl=tab.getElementsByTagName("ul")[0]，獲取ul集合中的第一個，也就是選項卡的標題部分。
17.var content=tab.getElementsByTagName("ul")[1]，獲取選項卡的內容部分。
18.nameUl.getElementsByTagName("li")[0].className="selected"，將選項卡標題部分的第一個標題的樣式class值設置為selected。
19.content.getElementsByTagName("li")[0].style.display="block"，將選項卡內容部分的第一個設置為顯示。
20.EventUtil.addHandler(nameUl,triggerType,function(event){})，此函數是實現選項卡的核心部分，具有三個參數，第一個參數是標題部分的ul對象，第二個是事件類型，第三個函數是要被注冊的事件處理函數。
21.var event=EventUtil.getEvent(event)，獲取事件對象。
22.var target=EventUtil.getTarget(event)，獲取事件源對象。
23.if(target.nodeName.toLowerCase()=="li")，判斷事件源對象的標簽名稱是否是li。
24.var nameList=nameUl.getElementsByTagName("li")，獲取選項卡標題部分li元素集合。
25.var contentList=content.getElementsByTagName("li")，獲取選項卡內容部分li元素結合。
26.for(var i=0,len=nameList.length;i<len;i++)，遍歷li元素集合。
27.nameList.className=""，將每一個標題li元素樣式類清除。
28.contentList.style.display="none"，將每一個選項卡內容部分的li隱藏。
29.if(nameList==target)，如果指定索引的標題li就是為事件源對象，也就是說鼠標當前點擊的li或者鼠標滑過的li。
30.nameList.className="selected"，那么就為它添加指定的樣式類。
31.contentList.style.display="block"，將對應索引的內容li顯示。