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

快乐打工仔 分类:实例代码

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

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

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

代码实例如下:

<!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多级选项卡效果代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容