JavaScript多級選項卡效果程式碼例項

antzone發表於2017-04-13
JavaScript

關於選項卡效果的更多效果可以檢視特效程式碼選項卡板塊。

本章節分享一個多級選項卡程式碼例項，並且詳細介紹一下它的實現過程。

所謂多級選項卡，就是一個選項卡下面還有選項卡效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  padding: 0;
  margin: 0;
  list-style: none;
}
.wrap {
  width: 920px;
  height: 320px;
  padding: 20px;
  margin: 40px 100px;
  background: #CCC;
}
.left-btn {
  width: 142px;
  height: 314px;
  float: left;
  background: #999;
}
.left-btn p {
  cursor: pointer;
  height: 77px;
  border-bottom: 1px solid #636363;
  border-top: 1px solid #DEDEDE;
  text-align: center;
  font: normal 18px/77px "微軟雅黑";
}
.left-btn p:first-child {
  border-top: none;
}
.left-btn p.active {
  background: #fff;
}
.layout-right {
  float: left;
  width: 770px;
  height: 314px;
  background: #fff;
}
.layout-right li {
  position: relative;
  display: none;
  width: 770px;
  height: 314px;
}
.layout-right li.active {
  display: block;
}
.layout-right li .ad-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26px;
  background: rgba(0, 0, 0, 0.33);
  color: #fff;
}
.layout-right li .ad-title span {
  box-sizing: border-box;
  cursor: pointer;
  text-align: center;
  font: normal 12px/26px "microsoft yahei";
  width: 25%;
  float: left;
  border-right: 1px solid #fff;
}
.layout-right li .ad-title span.curr {
  background: #FC005C;
}
.layout-right li .ad-img .img {
  display: none;
}
.layout-right li .ad-img .img.curr {
  display: block;
}
</style>
<script type="text/javascript">
window.onload = function () {
  function byId(obj) {
    return document.getElementById(obj)
  };
  var oBtnWrap = byId('btn-wrap');
  var oConWrap = byId('con-wrap');
  var btnA1 = oBtnWrap.getElementsByTagName('p');
  var oLi = oConWrap.getElementsByTagName('li');
  var obBtnAtrr = [];
  for (var index = 0; index < btnA1.length; ++index) {
    btnA1[index].index = index;
    btnA1[index].onclick = function () {
      var zIndex = this.index;
      for (var index = 0; index < btnA1.length; ++index) {
        btnA1[index].className = "";
      };
      this.className = "active";
      for (var j = 0; j < oLi.length; ++j) {
        oLi[j].style.display = "none";
      }
      oLi[zIndex].style.display = "block";
    };
  };
  banner1('a');
  banner1('b');
  banner1('c');
  banner1('d');
 
  function banner1(obj) {
    var sobj = byId(obj);
    var ospan = sobj.getElementsByTagName("span");
    var oimg = sobj.getElementsByTagName("p");
    for (var index = 0; index < ospan.length; ++index) {
      ospan[index].index = index;
      ospan[index].onmouseover = function () {
        var zindex = this.index;
        for (var index = 0; index < ospan.length; ++index) {
          ospan[index].className = "";
        };
        this.className = "curr";
        for (var j = 0; j < oimg.length; ++j) {
          oimg[j].style.display = "none";
        };
        oimg[zindex].style.display = "block";
      };
    }
  };
};
</script>
</head>
<body>
<div class="wrap">
  <div class="left-btn" id="btn-wrap">
    <p class="active">最新商品</p>
    <p>最低優惠</p>
    <p>名品推薦</p>
    <p>繽紛活動</p>
  </div>
  <div class="layout-right" id="con-wrap">
    <ul>
      <li class="active" id="a">
        <div class="ad-img">
          <p class="img curr"><img src="demo/js/img/tab1.jpg" width="770" height="314" /></p>
          <p class="img"><img src="demo/js/img/tab2.jpg" width="770" height="314" /></p>
          <p class="img"><img src="demo/js/img/tab3.png" width="770" height="314" /></p>
          <p class="img"><img src="demo/js/img/tab1.jpg" width="770" height="314" /></p>
        </div>
        <div class="ad-title">
          <span class="curr">小米手機5</span>
          <span>小米手機4</span>
          <span>小米手機3</span>
          <span>小米手機2</span>
        </div>
      </li>
      <li id="b">
        <div class="ad-img">
          <p class="img curr"><img src="demo/js/img/tab4.jpg" width="770" height="314" /></p>
          <p class="img"><img src="demo/js/img/tab2.jpg" width="770" height="314" /></p>
          <p class="img"><img src="demo/js/img/tab3.png" width="770" height="314" /></p>
          <p class="img"><img src="demo/js/img/tab1.jpg" width="770" height="314" /></p>
        </div>
        <div class="ad-title">
          <span class="curr">iPhone5</span>
          <span>iPhone4</span>
          <span>iPhone3</span>
          <span>iPhone2</span>
        </div>
      </li>
      <li id="c">
        <div class="ad-img">
          <p class="img curr"><img src="demo/js/img/tab3.png" width="770" height="314" /></p>
          <p class="img"><img src="demo/js/img/tab2.jpg" width="770" height="314" /></p>
          <p class="img"><img src="demo/js/img/tab1.jpg" width="770" height="314" /></p>
          <p class="img"><img src="demo/js/img/tab1.jpg" width="770" height="314" /></p>
        </div>
        <div class="ad-title">
          <span class="curr">錘子手機T1</span>
          <span>錘子手機T2</span>
          <span>錘子手機T3</span>
          <span>錘子手機T4</span>
        </div>
      </li>
      <li id="d">
        <div class="ad-img">
          <p class="img curr"><img src="demo/js/img/tab1.jpg" width="770" height="314" /></p>
          <p class="img"><img src="demo/js/img/tab1.jpg" width="770" height="314" /></p>
          <p class="img"><img src="demo/js/img/tab2.jpg" width="770" height="314" /></p>
          <p class="img"><img src="demo/js/img/tab3.png" width="770" height="314" /></p>
        </div>
        <div class="ad-title">
          <span class="curr">華為手機1</span>
          <span>華為手機2</span>
          <span>華為手機3</span>
          <span>華為手機4</span>
        </div>
      </li>
    </ul>
  </div>
</div>
</body>
</html>

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

一.程式碼註釋:

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

（2）.function byId(obj) {

  return document.getElementById(obj)

}，此函式可以實現獲取具有指定id屬性值的元素物件。

（3）.var oBtnWrap = byId('btn-wrap')，獲取id屬性值為btn-wrap元素物件。

（4）.var oConWrap = byId('con-wrap')，獲取id屬性值為con-wrap元素物件。

（5）. var btnA1 = oBtnWrap.getElementsByTagName('p')，獲取對應元素下的p元素集合。

（6）.var oLi = oConWrap.getElementsByTagName('li')，獲取對應元素下所有的li元素。

（7）.var obBtnAtrr = []，建立一個空陣列，後面會用到。

（8）.for (var index = 0; index < btnA1.length; ++index) {}，使用for迴圈遍歷每一個p元素。

（9）.btnA1[index].index = index，為當前p元素建立一個index屬性，並賦值為當前的index索引值。

（10）.btnA1[index].onclick = function () {}，為當前的p元素註冊onclick事件處理函式。

（11）.var zIndex = this.index，獲取當前p元素物件的索引值。

（12）.for (var index = 0; index < btnA1.length; ++index) {

  btnA1[index].className = "";

}，通過for迴圈將所有的p元素class屬性值清空。

（13）.this.className = "active"，將當前p元素的class屬性值設定為active。

（14）.for (var j = 0; j < oLi.length; ++j) {

  oLi[j].style.display = "none";

}，將所有的li元素設定為隱藏。

（15）.oLi[zIndex].style.display = "block"，將對應索引的li元素顯示出來，也就是下一級選項卡。

（16）.banner1('a')，進行函式呼叫，關於banner1函式的用法下面會介紹。

（17）.function banner1(obj)，此函式實現了子選項卡的一些初始化工作，比如事件處理函式的註冊等，引數是id屬性值。

（18）.var sobj = byId(obj)，獲取對應的元素物件。

（19）.var ospan = sobj.getElementsByTagName("span")，獲取元素物件下的所有span元素集合。

（20）.var oimg = sobj.getElementsByTagName("p")，獲取對應的p元素集合。

（21）.for (var index = 0; index < ospan.length; ++index) {}，使用for迴圈遍歷每一個span元素。

（22）.ospan[index].index = index，為當前span元素新增一個index屬性，並賦值為當前span元素在集合中的索引。

（23）.ospan[index].onmouseover = function () {  

  var zindex = this.index;

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

    ospan[index].className = "";

  };

  this.className = "curr";

  for (var j = 0; j < oimg.length; ++j) {

    oimg[j].style.display = "none";

  };

  oimg[zindex].style.display = "block";

};

註冊onmouseover事件處理函式，當滑鼠懸浮就可以顯示對應的圖片。

原理其實上面再第一級選項卡切換的時候都已經涉及到了。

二.相關閱讀:

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

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

（3）.onmouseover事件可以參閱javascript mouseover事件一章節。

相關文章