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

2023-12-04 13:32:50 前端筆記 171

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

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

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

代碼實例:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="/" />
<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隱藏。