JavaScript選項卡效果詳解

admin發表於2017-10-23
JavaScript

本章節分享一段程式碼例項，它實現了簡單的選項卡功能，下面就詳細介紹一下它的實現原理。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body,ul,li{
  margin:0; 
  padding:0; 
  font:12px/1.5 arial;
}
ul,li{list-style:none;}
.wrap{
  width:500px; 
  margin:20px auto;
}
.hide{display:none;}
#tab_t{
  height:25px;
  border-bottom:1px solid #ccc;
}
#tab_t li{
  float:left;
  width:80px;
  height:24px;
  line-height:24px;
  margin:0 4px;
  text-align:center;
  border:1px solid #ccc;
  border-bottom:none;
  background:#f5f5f5;
  cursor:pointer
}
#tab_t .act{
  position:relative;
  height:25px;
  margin-bottom:-1px;
  background:#fff;
}
#tab_c{
  border:1px solid #ccc;
  border-top:none;
  padding:20px;
}
</style>
<script>
window.onload = function(){
  tab("tab_t","li","tab_c","div","onmouseover")
  function tab(tab_t,tab_t_tag,tab_c,tag_c_tag,evt){
    var tab_t = document.getElementById(tab_t);
    var tab_t_li = tab_t.getElementsByTagName(tab_t_tag);
    var tab_c = document.getElementById(tab_c);
    var tab_c_li = tab_c.getElementsByTagName(tag_c_tag);
    var len = tab_t_li.length;
    var index=0;
    for(index=0; index<len; index++){
      tab_t_li[index].index = index;
      tab_t_li[index][evt] = function(){
        for(index=0; index<len; index++){
          tab_t_li[index].className = '';
          tab_c_li[index].className = 'hide';
        }
        tab_t_li[this.index].className = 'act';
        tab_c_li[this.index].className = '';
      }
    }
  }
}
</script>
</head>
<body>
<div class="wrap">
  <ul id="tab_t">
    <li class="act">div教程</li>
    <li>css教程</li>
    <li>js教程</li>
    <li>softwy.com</li>
 </ul>
 <div id="tab_c">
   <div>螞蟻部落一</div>
   <div class="hide">螞蟻部落二</div>
   <div class="hide">螞蟻部落三</div>
   <div class="hide">螞蟻部落四</div>
 </div>
</div> 
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.window.onload = function(){}，為文件註冊load事件處理函式，文件內容完全載入完畢觸發事件。

（2）.tab("tab_t","li","tab_c","div","onmouseover")，此函式實現了選項卡功能。

（3）.function tab(tab_t,tab_t_tag,tab_c,tag_c_tag,evt){}，第一個引數規定選項卡的容器id值，第二個引數規定選項卡的元素型別，第三個引數規定內容的容器id，第四個引數規定內容的元素型別，第五個引數規定事件型別。

（4）.var tab_t = document.getElementById(tab_t)，獲取元素物件。

（5）.var tab_t_li = tab_t.getElementsByTagName(tab_t_tag)，獲取tab_t下所有指定型別元素集合。

（6）.ar len = tab_t_li.length，獲取選項卡的數量。

（7）.var index=0，宣告一個變數並賦初值為0，用作用索引。

（8）.for(index=0; index<len; index++)，遍歷每一個元素。

（9）.tab_t_li[index].index = index，為當前元素新增一個index屬性，屬性值設定為當前元素的索引。

（10）.tab_t_li[index][evt] = function(){}，為當前元素註冊指定型別事件處理函式。

（11）.for(index=0; index<len; index++){

  tab_t_li[index].className = '';

  tab_c_li[index].className = 'hide';

}，遍歷每一個元素，並設定相應的class屬性值。

（12）.tab_t_li[this.index].className = 'act';

tab_c_li[this.index].className = '';

設定選項卡的樣式和將當前內容顯示出來。

二.相關閱讀:

（1）.getElementsByTagName()參閱document.getElementsByTagName()一章節。

（2）.className參閱js className一章節。

相關文章