js實現的垂直選項卡效果程式碼例項

antzone發表於2017-04-07
JS

本章節分享一段程式碼例項，它實現了簡單的垂直選項卡效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!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()一章節。

相關文章