JavaScript多级选项卡效果代码实例

快乐打工仔发布于 2年前分类：实例代码

关于选项卡效果的更多效果可以查看特效代码选项卡板块。

本章节分享一个多级选项卡代码实例，并且详细介绍一下它的实现过程。

所谓多级选项卡，就是一个选项卡下面还有选项卡效果。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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事件一章节。

JavaScript多级选项卡效果代码实例，这样的场景在实际项目中还是用的比较多的，关于JavaScript多级选项卡效果代码实例就介绍到这了。

JavaScript多级选项卡效果代码实例属于前端实例代码，有关更多实例代码大家可以查看。

我来回复

暂无回复内容