js實現的可以通用的選項卡程式碼例項

antzone發表於2017-03-14
JS

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

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.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顯示。

三.相關閱讀:

1.event?event : window.event可以參閱var ev=window.event||ev的作用是什麼一章節。

2. event.target||event.srcElement可以參閱javascript target一章節。

3.addEventListener和attachEvent可以參閱javascript如何註冊事件處理函式一章節。

4.querySelectorAll()可以參閱document.querySelectorAll()一章節。

5.getElementsByTagName()函式可以參閱document.getElementsByTagName()一章節。

6.indexOf()函式可以參閱JavaScript String indexOf()一章節。

7.push()函式可以參閱JavaScript push()一章節。 

相關文章