js实现的垂直选项卡效果代码实例

快乐打工仔 分类:实例代码

本章节分享一段代码实例,它实现了简单的垂直选项卡效果。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>犀牛前端部落</title>
<style type="text/css">
*{
  margin:0;
  padding:0;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
.container{
  margin:0 auto;
  width:500px;
  overflow:hidden;
  background:beige;
}
li{
  border-top:1px solid lightgrey;
  border-left:1px solid lightgrey;
  border-right:1px solid lightgrey;
  height:35px;
  line-height:35px;
  list-style:none;
  text-align:center;
  width:100px;
}
li:last-child{
  height:159px;
  border-right:1px solid lightgrey;
  border-bottom:1px solid lightgrey;
}
li.active{
  border-right:1px solid white;
  background white;
}
li.normal{
  border-right:1px solid white;
  background:red;
}
#tab_content{
  float:right;
  width:400px;
  *width:394px;
  background: white;
  height: 300px;
  overflow: hidden;
  border-top: 1px solid lightgrey;
  border-right: 1px solid lightgrey;
  border-bottom: 1px solid lightgrey;
  border-left: 0px solid lightgrey;
}
#tab_content .content{
  padding:15px;
  -moz-border-radius: 5px;
  height: 300px;
}
#tabnav a{text-decoration:none;}
</style>
</head>
<body>
<div class="container">  
  <div id="tab_content">  
    <div id="a" class="content">犀牛前端部落一</div>
    <div id="b" class="content">犀牛前端部落二</div>
    <div id="c" class="content">犀牛前端部落三</div>
    <div id="d" class="content">犀牛前端部落四</div>
  </div>
  <div >
    <ul id="tabnav">
      <li ><a href="#a" >标题一</a></li>
      <li class="active"><a href="#b" >标题二</a></li>
      <li><a href="#c" >标题三</a></li>
      <li><a href="#d" >标题四</a></li>
    </ul>
  </div>
</div>
<script type="text/javascript">
function changeStyle(){
  this.onclick=function(){
    var list=this.parentNode.childNodes;
    for(var index=0;index<list.length;index++){
      if(1==list[index].nodeType && 'active'==list[index].className){
        list[index].className="";
      }
    }
    this.className='active';
  }
}
var tabs=document.getElementById('tabnav').childNodes;
for(var index=0;index<tabs.length;index++){
  if(1==tabs[index].nodeType){
    changeStyle.call(tabs[index]);
  }
}
</script>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).function changeStyle(){},此方法实现了注册事件处理函数的功能。

(2).this.onclick=function(){},注册事件处理函数,this在本代码中就是一个li元素。

(3).var list=this.parentNode.childNodes,获取当前li元素的父节点下所有的子节点。

(4).for(var index=0;index<list.length;index++){

  if(1==list[index].nodeType && 'active'==list[index].className){

    list[index].className="";

  }

},遍历每一个节点。

如果当前节点类型是元素节点,也就是li元素,并且className属性值等于active

那么就将className属性值设置为空。

(5).this.className='active',将当前的className属性值设置为active。

(6).var tabs=document.getElementById('tabnav').childNodes,获取所有的标题li元素。

(7).for(var index=0;index<tabs.length;index++){

  if(1==tabs[index].nodeType){

    changeStyle.call(tabs[index]);

  }

},遍历每一个子节点元素。

如果是元素节点,也就是li元素,那么就调用changeStyle()方法。

二.相关阅读:

(1).parentNode可以参阅js parentNode一章节。

(2).childNodes可以参阅js childNodes一章节。

(3).nodeType可以参阅js nodeType一章节。

(4).className可以参阅js className一章节。

(5).call()方法可以参阅js call()一章节。

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

回复

我来回复
  • 暂无回复内容