这是一个典型的例子了，如果遇到单个tab栏，设置一下还好，但是如果涉及到多个tab栏的时候，肯定是要涉及到封装的了，那么，作为前端小白的我，应该怎么去做呢？如图:
项目示例.png
两个tab栏的切换不会互相影响，而且切换的时候都会是我们想要的结果，这里涉及到的知识，“排他效果”
//根据spans的个数,进行遍历,来做tab栏的切换
for(var i=0;i<spans.length;i++){
//标记对应标签的下标值
spans[i].index = i;
spans[i].onmouseover = function () {
//使用"排他"算法
for(var j=0;j<spans.length;j++){
spans[j].className = "";
lis[j].className = "";
}
//再使用"利己"算法 -- 设定选中的模块的className
this.className = "current";
lis[this.index].className = "show";
}
}
全部代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
*{margin:0;padding:0;}
.box{
width: 350px;
height: 300px;
border:1px solid #ccc;
margin:100px auto;
}
.tabbar{
}
.tabbar span{
display: inline-block;
width: 80px;
height: 30px;
background-color: pink;
text-align:center;
line-height:30px;
/*设置鼠标为手指*/
cursor: pointer;
}
ul{
list-style: none;
}
.tabbar span.current{
background-color: purple;
}
.list li{
width: 100%;
height: 270px;
background-color: purple;
display: none;
}
.list li.show{
display: block;
}
</style>
<script>
window.onload = function () {
//若想多个盒子不相互影响,我们可以通过id给他们分开
//封装tab栏切换函数 --传递参数:
function tab(obj) {
//通过标签的id名获得指定的控件,或者叫,盒子
var target = document.getElementById(obj);
//获取target标签里的所有的spans
var spans = target.getElementsByTagName('span');
//获取target标签里的所有的列表(lis)
var lis = target.getElementsByTagName('li');
//根据spans的个数,进行遍历,来做tab栏的切换
for(var i=0;i<spans.length;i++){
//标记对应标签的下标值
spans[i].index = i;
spans[i].onmouseover = function () {
//使用"排他"算法
for(var j=0;j<spans.length;j++){
spans[j].className = "";
lis[j].className = "";
}
//再使用"利己"算法 -- 设定选中的模块的className
this.className = "current";
lis[this.index].className = "show";
}
}
}
//由于有三个tab栏盒子,所以调用三次封装的函数
tab("one");
tab("two");
tab("three");
}
</script>
<body>
<div class="box" id="one">
<div class="tabbar">
<span class="current">新闻</span>
<span>体育</span>
<span>娱乐</span>
<span>八卦</span>
</div>
<div class="list">
<ul>
<li class="show">新闻模块</li>
<li>体育模块</li>
<li>娱乐模块</li>
<li>八卦模块</li>
</ul>
</div>
</div>
<div class="box" id="two">
<div class="tabbar">
<span class="current">新闻</span>
<span>体育</span>
<span>娱乐</span>
<span>八卦</span>
</div>
<div class="list">
<ul>
<li class="show">新闻模块</li>
<li>体育模块</li>
<li>娱乐模块</li>
<li>八卦模块</li>
</ul>
</div>
</div>
<div class="box" id="three">
<div class="tabbar">
<span class="current">新闻</span>
<span>体育</span>
<span>娱乐</span>
<span>八卦</span>
</div>
<div class="list">
<ul>
<li class="show">新闻模块</li>
<li>体育模块</li>
<li>娱乐模块</li>
<li>八卦模块</li>
</ul>
</div>
</div>
</body>
</html>
