JavaScript 側欄選項卡

admin發表於2018-12-16
JavaScript

本章節分享一段程式碼示例，它實現了側欄選項卡的功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<meta name="keywords" content="" />
<style type="text/css">
body{
  font-size:12px;
}
a:link,a:visited,a:hover,a:active{
  text-decoration:none;
  color:#256bae;
}
.warp{
  width:586px;
  height:269px !important;
  height:271px;
  border:1px solid #dbdcd7;
}
.main{
  width:562px;
  height:269px !important;
  height:271px;
  padding:5px;
  margin-left:15px;
  overflow:hidden;
  float:left;
  line-height:271px;
  text-align:center;
}
.news{
  position:absolute;
  z-index:4;
  width:24px;
}
.news ul{
  list-style:none;
  padding:0;
  margin:0;
}
.news ul li{
  height:84px !important;
  height:88px;
  width:20px;
  margin-bottom:0px;
  padding-top:5px;
  text-align:center;
  cursor:pointer;
  vertical-align:middle;
  background-color:#e5e5e5;
  border-right:#dbdcd7 solid 1px;
  border-bottom:#dbdcd7 solid 1px;
}
.news ul li.on{
  background-color:#ffffff;
  border:#FFFFFF 0px
}
.news span{
  display:block;
  margin-top:9px !important;
  margin-top:20px;
}
.dis{display:block;}
.undis{display:none;}
</style>
<script type="text/javascript">
function g(o){
  return document.getElementById(o);
}
function HoverLi(m,n,counter){
  for(var index=1;index<=counter;index++){
    g('tb_'+m+index).className='';
    g('tbc_'+m+index).className='undis';
  }
  g('tbc_'+m+n).className='dis';  g('tb_'+m+n).className='on';
}
window.onload=function(){
  var lis=document.getElementsByTagName("li");
  for(var index=0;index<lis.length;index++){
    (function(index){
      lis[index].onmouseover=function(){
        HoverLi(1,index+1,3);
      }
    })(index)
  }
}
</script>
</head>
<body>
<div class="warp">
  <div class="news">
    <ul>
      <li class="on" id="tb_11"><span>企業新聞</span></li>
      <li class="" id="tb_12"><span>業內諮訊</span></li>
      <li class="" id="tb_13"><span>業內諮訊</span></li>
    </ul>
  </div>
  <div class="dis" id="tbc_11">
    <div class="main">螞蟻部落一</div>
  </div>
  <div class="undis" id="tbc_12">
    <div class="main">螞蟻部落二</div>
  </div>
  <div class="undis" id="tbc_13">
    <div class="main">螞蟻部落三</div>
  </div>
</div>
</body>
</html>

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

一.程式碼註釋:

（1）.function g(o){

  return document.getElementById(o);

}此方法模擬實現了類似於jQuery的id選擇器功能。

（2）.function HoverLi(m,n,counter){}，此方法實現了選項卡切換功能，前兩個引數是和選項卡內容的id數字相對應的，第二個引數規定有幾個選項卡。

（3）.for(var index=1;index<=counter;index++){

  g('tb_'+m+index).className='';

  g('tbc_'+m+index).className='undis';

}，之所以從1開始進行遍歷，是因為索引為0的div是作為選項卡的標題容器的。

然後將標題li元素的class屬性值清空，並且將內容div的class屬性值設定為undis。


（4）.g('tbc_'+m+n).className='dis';

g('tb_'+m+n).className='on';

將對應的內容div的class屬性值設定為dis。

將對應的標題li的class屬性值設定為on。

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

（6）.var lis=document.getElementsByTagName("li")，獲取li元素集合。

（7）.for(var index=0;index<lis.length;index++){

  (function(index){

    lis[index].onmouseover=function(){

      HoverLi(1,index+1,3);

    }

  })(index)

以閉包的方式為li元素批量註冊時間處理函式。

二.相關閱讀:

（1）.className參閱JavaScript className一章節。

（2）.getElementsByTagName()參閱document.getElementsByTagName()一章節。

（3）.onmouseover事件參閱JavaScript mouseover 事件一章節。

（4）.閉包參閱JavaScript 閉包一章節。

相關文章