javascript實現tab選項卡過程分解詳解

antzone發表於2017-04-01
JavaScript

tab選項卡是最為常見的功能模組之一，所以掌握它的製作技巧是非常有必要的。

下面就對一個簡單的程式碼例項進行詳細的分解，介紹一下它的實現過程。

當然此選項卡比較簡單，外表也不美觀，實際應用的話還需要更好的修改和美化，不過我們們這裡只是介紹一下它的實現過程。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.active{
  background: #9CC;
}
.content{
  width:500px;
  height:200px;
  border:1px #666666 solid;
  display:none;
}
</style>
<script type="text/javascript">
window.onload=function(){
  var odiv=document.getElementById('box');
  var btn=odiv.getElementsByTagName('input');
  var contents=odiv.getElementsByTagName('div') ;
  
  for(var index=0;index<btn.length;index++){ 
    btn[index].index=index;
    btn[index].onclick=function(){
      for(var y=0;y<btn.length;y++){ 
        btn[y].className='';
        contents[y].style.display='none';
      }
      this.className='active';
      contents[this.index].style.display='block';
    }
   }
}
</script>
</head>
<body>
<div id="box">     
  <input type="button" class="active" value="選項卡一"/>
  <input type="button" value="選項卡二"/>
  <input type="button" value="選項卡三"/>
  <input type="button" value="選項卡四"/>
  <div class="content" style="display:block;">螞蟻部落一</div>
  <div class="content">螞蟻部落二</div>
  <div class="content">螞蟻部落三</div>
  <div class="content">螞蟻部落四</div>
</div>
</body>
</html>

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

一.程式碼註釋:

（1）.window.onload=function(){}，當文件內容完全載入完畢再去執行函式中的程式碼。

（2）.var odiv=document.getElementById('box')，獲取id屬性值為box的元素物件。

（3）.var btn=odiv.getElementsByTagName('input')，獲取odiv物件下的input元素物件集合。

（4）.var contents=odiv.getElementsByTagName('div')，獲取odiv物件下的div元素物件集合。

（5）.for(var index=0;index<btn.length;index++)，遍歷每一個input元素（也就是按鈕）。

（6）.btn[index].index=index，每一個input元素物件新增一個index屬性，並賦值為當前的此元素在集合中的索引值。（7）.btn[index].onclick=function(){}，為每一個按鈕註冊onclick事件處理函式。

（8）.for(var y=0;y<btn.length;y++){   

  btn[y].className='';

  contents[y].style.display='none';

}遍歷每一個按鈕，然後將按鈕的class屬性值清空，並且設定作為內容的div隱藏。

（9）.this.className='active',為當前的按鈕新增名稱為active樣式類。

（10）.contents[this.index].style.display='block'，將對應索引的內容div設定為可見狀態。

二.相關閱讀:

（1）.getElementsByTagName()方法可以參閱document.getElementsByTagName()一章節。

（2）.className屬性可以參閱javascript className一章節。

相關文章