這是一個典型的例子了，如果遇到單個tab欄，設(shè)置一下還好，但是如果涉及到多個tab欄的時候，肯定是要涉及到封裝的了，那么，作為前端小白的我，應(yīng)該怎么去做呢？如圖:
項(xiàng)目示例.png
兩個tab欄的切換不會互相影響，而且切換的時候都會是我們想要的結(jié)果，這里涉及到的知識，“排他效果”
//根據(jù)spans的個數(shù),進(jìn)行遍歷,來做tab欄的切換
for(var i=0;i<spans.length;i++){
//標(biāo)記對應(yīng)標(biāo)簽的下標(biāo)值
spans[i].index = i;
spans[i].onmouseover = function () {
//使用"排他"算法
for(var j=0;j<spans.length;j++){
spans[j].className = "";
lis[j].className = "";
}
//再使用"利己"算法 -- 設(shè)定選中的模塊的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;
/*設(shè)置鼠標(biāo)為手指*/
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欄切換函數(shù) --傳遞參數(shù):
function tab(obj) {
//通過標(biāo)簽的id名獲得指定的控件,或者叫,盒子
var target = document.getElementById(obj);
//獲取target標(biāo)簽里的所有的spans
var spans = target.getElementsByTagName('span');
//獲取target標(biāo)簽里的所有的列表(lis)
var lis = target.getElementsByTagName('li');
//根據(jù)spans的個數(shù),進(jìn)行遍歷,來做tab欄的切換
for(var i=0;i<spans.length;i++){
//標(biāo)記對應(yīng)標(biāo)簽的下標(biāo)值
spans[i].index = i;
spans[i].onmouseover = function () {
//使用"排他"算法
for(var j=0;j<spans.length;j++){
spans[j].className = "";
lis[j].className = "";
}
//再使用"利己"算法 -- 設(shè)定選中的模塊的className
this.className = "current";
lis[this.index].className = "show";
}
}
}
//由于有三個tab欄盒子,所以調(diào)用三次封裝的函數(shù)
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>
