javascript实现tab选项卡过程分解详解

我心飞翔 分类:实例代码

tab选项卡是最为常见的功能模块之一,所以掌握它的制作技巧是非常有必要的。

下面就对一个简单的代码实例进行详细的分解,介绍一下它的实现过程。

当然此选项卡比较简单,外表也不美观,实际应用的话还需要更好的修改和美化,不过咱们这里只是介绍一下它的实现过程。

代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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一章节。

网站出售中,有意者加微信:javadudu

回复

我来回复
  • 暂无回复内容