javascript tab選項卡效果詳解

螞蟻小編發表於2017-04-16
JavaScript

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

下面給出程式碼，並且詳細介紹一下它的實現過程。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
body,div,ul,li{
  padding:0;
  margin:0;
  text-align:center;
}
body{
  font:12px "宋體";
  text-align:center;
}
a:link,a:visited{
  color:#00F;
  text-decoration:none;
}
a:hover,a:active{
  color:#c00;
  text-decoration:underline;
}
ul{list-style:none;}
.box{margin:1em auto;}
br{clear:both;}
/*選單class*/
.Menubox{
  width:960px;
  background:#eff8fe;
  border-bottom:2px #9bcff7 solid;
  height:36px;
  line-height:36px; 
  border-top: none;
}
.Menubox li{
  float:left;
  display:block;
  cursor:pointer;
  width:114px;
  border-right:0px #cccccc solid;
  text-align:center;
  color:#0099cc;
  font-weight:bold;
  font-size:14px; 
  border-top: 2px solid #98d0f7; 
  border-right: 2px solid #98d0f7;
}
.Menubox li.hover{
  background:#fff;
  width:116px;
  border:2px solid #98d0f7;
  border-bottom:0px solid #fff;
  color:#dc0004;
  font-weight:bold;
  height:36px;
  line-height:36px;
  font-size:14px; 
  border-right: 2px solid #98d0f7; 
  border-left: none;
 }
.Menubox li.out{border-top:1px #cccccc solid;}
.Contentbox{
  width:956px;
  clear:both;
  border:2px solid #98d0f7;
  border-top:0;
  height:150px;
  line-height:150px;
  text-align:center;
  padding-top:8px;
}
.Contentbox span{color:#ccc;}
</style>
<script language="javascript" type="text/javascript">
function setTab(name,cursel,n){
  for(i=1;i<=n;i++){
    var menu=document.getElementById(name+i);
    var con=document.getElementById("con_"+name+"_"+i);
    menu.className=i==cursel?"hover":"";
    con.style.display=i==cursel?"block":"none";
  }
}
window.onload=function(){
  var Menubox=document.getElementById("Menubox");
  var lis=Menubox.getElementsByTagName("li");
  for(var index=1;index<lis.length;index++){
    (function(index){
      lis[index].onclick=function(){
        setTab('two',index,4);
      }
    })(index)
  }
}
</script>
</head>
<body>
<div class="box">
  <div id="Menubox" class="Menubox">
    <ul>
      <li style="color:#000000; width:180px">螞蟻部落</li>
      <li id="two1" class="hover">連心卡</li>
      <li id="two2">儲蓄卡</li>
      <li id="two3">信用卡</li>
      <li id="two4">消費卡</li>
    </ul>
  </div>
  <div class="Contentbox">
    <p id="con_two_1" >標題列表1<span>(點選切換)</span></p>
    <p id="con_two_2" style="display:none">標題列表2<span>(點選切換)</span></p>
    <p id="con_two_3" style="display:none">標題列表3<span>(點選切換)</span></p>
    <p id="con_two_4" style="display:none">標題列表4<span>(點選切換)</span></p>
  </div>
</div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.function setTab(name,cursel,n){}，此方法實現了選項卡切換功能，第一個引數是一個字串，其實是li元素id屬性值得字元部分，第二個引數是一個數字，和li元素選項卡和p元素內容部分的索引對應，第三個引數是規定有幾個選項卡。

（2）.for(i=1;i<=n;i++){}，一個for迴圈語句，用於進行比對，然後進行選項卡切換的相關設定，之所以從1開始是因為第一個li元素不是選項卡的一部分。

（3）.var menu=document.getElementById(name+i)，獲取對應索引的li元素物件。

（4）.var con=document.getElementById("con_"+name+"_"+i)，獲取對應索引的p元素物件。

（5）.menu.className=i==cursel?"hover":""，如果當前i的值等於cursel，那麼就新增class屬性並設定屬性值為hover。

（6）.con.style.display=i==cursel?"block":"none"，和上面同樣的道理，如果相等，則顯示，否則隱藏。

（7）.window.onload=function(){}，當文件內容完全載入完畢再去執行函式中的程式碼。

（8）.var Menubox=document.getElementById("Menubox")，獲取id屬性值為Menubox的元素物件。

（9）.var lis=Menubox.getElementsByTagName("li")，獲取Menubox元素下的所有li元素集合。

（10）.for(var index=1;index<lis.length;index++){}，for迴圈語句，遍歷每一個li元素。

（11）.(function(index){

  lis[index].onclick=function(){

    setTab('two',index,4);

  }

})(index)，採用閉包的方式為li元素註冊click事件處理函式。

二.相關閱讀:

（1）.className可以參閱js className一章節。

（2）.三元運算子可以參閱javascript 三元運算子一章節。

（3）.getElementsByTagName()可以參閱document.getElementsByTagName()一章節。

（4）.閉包可以參閱閉包概念簡單通俗介紹一章節。

相關文章