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隐藏。