JS選項卡效果實現(xiàn)的方法
選項卡在js中是一個重要的存在。他沒有那么難，但在工作中卻有重要的位置。幾乎在每一個網(wǎng)站都能看到選項卡的實例。所以今天寫一下選項卡的實現(xiàn)。
我們設(shè)想有三個按鈕分別來控制三個盒子當(dāng)我們點擊當(dāng)前的按鈕的時候，讓對應(yīng)的盒子顯示，讓其余的盒子隱藏。
選項卡這個效果估計以后的項目會經(jīng)常涉及到，對代碼還是半熟練的情況下還是寫下來吧。
先來布局一個簡單的頁面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
#box{margin: 50px;}
#box li{width: 100px;height: 40px;line-height: 40px;text-align: center;background-color: #d8d8d8;margin-right: 2px;float: left;}
#box .active{background: red;}
#content{clear: both;}
#content div{width: 404px;height: 200px;border: 1px solid #d8d8d8;display: none;}
</style>
</head>
<body>
<div id="box">
<!--這個ul為選項卡的菜單，提供選擇項，并且設(shè)置其中一個li為默認(rèn)樣式-->
<ul>
<li class="active">新聞</li>
<li>社會</li>
<li>科技</li>
<li>娛樂</li>
</ul>
<!--這個div為選項卡的內(nèi)容，顯示不同菜單的不同內(nèi)容，并且設(shè)置其中一個div為可見，其他隱藏-->
<div id="content">
<div style="display: block;">新聞</div>
<div>社會</div>
<div>科技</div>
<div>娛樂</div>
</div>
</div>
</body>
</html>
選項卡的制作原理是：有若干的選項和對應(yīng)數(shù)量的內(nèi)容，當(dāng)對其中一個選項進(jìn)行操作時，顯示對應(yīng)內(nèi)容，其他內(nèi)容不顯示。所以，在頁面布局的時候，我們先給一個選項設(shè)置特殊樣式和顯示其對應(yīng)的內(nèi)容，其他選項樣式不變，對應(yīng)內(nèi)容隱藏。當(dāng)操作選項時，把選項的類名改為特殊樣式的類名，并且顯示對應(yīng)內(nèi)容。
<script type="text/javascript">
window.onload=function(){
var oBox=document.getElementById('box');
var aLi=oBox.getElementsByTagName('li');
var oCon=document.getElementById('content');
var aDiv=oCon.getElementsByTagName('div');
for(var i=0;i<aLi.length;i++){
aLi[i].index=i; //為每個li添加對應(yīng)的索引index
aLi[i].onclick=function(){ //循環(huán)為每個li添加onclick事件
for(var i=0;i<aLi.length;i++){
aLi[i].className=''; //循環(huán)清空li樣式
aDiv[i].style.display='none'; //循環(huán)隱藏所有div
}
this.className='active'; //當(dāng)前點擊的元素樣式變成active
aDiv[this.index].style.display='block'; //this.index 獲取當(dāng)前l(fā)i對應(yīng)的索引
}
}
}
</script>
今天在做選項卡效果時遇到了一個非常低級的錯誤，但卻遲遲找不到原因，如下： 這個是我布局的選項卡的菜單，看起來很簡單，一個ul包著3個li，其中一個是 |，所以可以點擊的菜單項只有兩項，沒毛病。
<ul id="text">
<li class="active"><a href="javascript:">必備軟件</a></li>
<li id="shu">|</li>
<li><a href="javascript:">常用軟件</a></li>
</ul>
內(nèi)容就不看了，接下來我就開始寫JS的代碼，getElementById什么的巴拉巴拉開始寫，寫完for循環(huán)覺得寫完了，然后就運行。。。默認(rèn)頁正常，點擊，，空白。？？？？？怎么回事？F12，aLink[i] is undefind；加了一個console.log，檢測獲取的aLi,aLink，有值，能獲取，沒錯。然后下面循環(huán)檢測aLink[i]，未定義，這是什么情況？在JS代碼搞了將近一個小時，換獲取方法，換變量名….各種方法，沒效果。萬萬沒想到的是，重新檢測aLi的時候，發(fā)現(xiàn)長度為3。。頓時懵逼，aLink的長度為2，所以肯定有一個找不到。趕緊把第二個li改成span，成功。萬惡的 ||||||||。只能說自己的知識還不夠，還要繼續(xù)努力?。?！
var oBox=document.getElementById('box');
var oNav=document.getElementById('nav');
var aLi=oNav.getElementsByTagName('li');
var oCon=document.getElementById('con');
var aLink=oBox.getElementsByClassName('hide');
for(var i=0;i<aLi.length;i++){
aLi[i].index=i; //為每個li添加對應(yīng)的索引index
aLi[i].onclick=function(){ //循環(huán)為每個li添加onclick事件
for(var i=0;i<aLi.length;i++){
aLi[i].className=''; //循環(huán)清空li樣式
aLink[i].style.display='none'; //循環(huán)隱藏所有div
}
this.className='active'; //當(dāng)前點擊的元素樣式變成active
aLink[this.index].style.display='block'; //this.index 獲取當(dāng)前l(fā)i對應(yīng)的索引
}
}
實例：用html+css+js實現(xiàn)選項卡切換效果
使用之前學(xué)過的綜合知識，實現(xiàn)一個新聞門戶網(wǎng)站上的常見選項卡效果：
文字素材:
房產(chǎn)：
275萬購昌平鄰鐵三居 總價20萬買一居
200萬內(nèi)購五環(huán)三居 140萬安家東三環(huán)
北京首現(xiàn)零首付樓盤 53萬購東5環(huán)50平
京樓盤直降5000 中信府 公園樓王現(xiàn)房
家居:
40平出租屋大改造 美少女的混搭小窩
經(jīng)典清新簡歐愛家 90平老房煥發(fā)新生
新中式的酷色溫情 66平撞色活潑家居
瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計
二手房：
通州豪華3居260萬 二環(huán)稀缺2居250w甩
西3環(huán)通透2居290萬 130萬2居限量搶購
黃城根小學(xué)學(xué)區(qū)僅260萬 121平70萬拋!
獨家別墅280萬 蘇州橋2居優(yōu)惠價248萬
先分析基本思路。首先編寫HTML，然后再加載樣式，最后用JS修改相應(yīng)的DOM，達(dá)到更改選項卡和內(nèi)容的目的。
一、HTML頁面布局
HTML顯示的是所有與文字有關(guān)的信息，所以在這個頁面中與文字有關(guān)的信息為上面選項卡的三個標(biāo)題，以及選項卡的內(nèi)容。
于是決定標(biāo)題使用<ul> <li>布局，內(nèi)容使用<div>布局。編寫代碼如下：
現(xiàn)在展示出來的樣式是這樣的：
CSS樣式
要制作成上圖所示的選項卡樣式，幾個地方需要注意：
1、整個選項卡的樣式設(shè)置
2、選項卡標(biāo)題的樣式設(shè)置
3、選項卡內(nèi)容的樣式設(shè)置
4、只能顯示一個選項卡的內(nèi)容，其他選項卡內(nèi)容隱藏。
寫完以后，效果就出來啦。
JavaScript實現(xiàn)選項卡切換
1、首先需要獲取選項卡標(biāo)題和選項卡內(nèi)容
2、選項卡內(nèi)容有三個，需要循環(huán)遍歷來操作，得知哪個選項卡和哪個選項內(nèi)容匹配。
3、通過改變DOM的css類名稱,當(dāng)前點擊的選項卡顯示，其它隱藏。
完整代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> 選項卡</title>
<style type="text/css">
/* CSS樣式制作 */
*{padding:0px; margin:0px;}
a{ text-decoration:none; color:black;}
a:hover{text-decoration:none; color:#336699;}
#tab{width:270px; padding:5px;height:150px;margin:20px;}
#tab ul{list-style:none; display:;height:30px;line-height:30px; border-bottom:2px #C88 solid;}
#tab ul li{background:#FFF;cursor:pointer;float:left;list-style:none height:29px; line-height:29px;padding:0px 10px; margin:0px 10px; border:1px solid #BBB; border-bottom:2px solid #C88;}
#tab ul li.on{border-top:2px solid Saddlebrown; border-bottom:2px solid #FFF;}
#tab div{height:100px;width:250px; line-height:24px;border-top:none; padding:1px; border:1px solid #336699;padding:10px;}
.hide{display:none;}
</style>
<script type="text/javascript">
// JS實現(xiàn)選項卡切換
window.onload = function(){
var myTab = document.getElementById("tab"); //整個div
var myUl = myTab.getElementsByTagName("ul")[0];//一個節(jié)點
var myLi = myUl.getElementsByTagName("li"); //數(shù)組
var myDiv = myTab.getElementsByTagName("div"); //數(shù)組
for(var i = 0; i<myLi.length;i++){
myLi[i].index = i;
myLi[i].onclick = function(){
for(var j = 0; j < myLi.length; j++){
myLi[j].className="off";
myDiv[j].className = "hide";
}
this.className = "on";
myDiv[this.index].className = "show";
}
}
}
</script>
</head>
<body>
<!-- HTML頁面布局 -->
<div id = "tab">
<ul>
<li class="off">房產(chǎn)</li>
<li class="on">家居</li>
<li class="off">二手房</li>
</ul>
<div id="firstPage" class="hide">
<a href = "#">275萬購昌平鄰鐵三居 總價20萬買一居</a><br/>
<a href = "#">200萬內(nèi)購五環(huán)三居 140萬安家東三環(huán)</a><br/>
<a href = "#">北京首現(xiàn)零首付樓盤 53萬購東5環(huán)50平</a><br/>
<a href = "#">京樓盤直降5000 中信府 公園樓王現(xiàn)房</a><br/>
</div>
<div id="secondPage" class="show">
<a href = "#">40平出租屋大改造 美少女的混搭小窩</a><br/>
<a href = "#">經(jīng)典清新簡歐愛家 90平老房煥發(fā)新生</a><br/>
<a href = "#">新中式的酷色溫情 66平撞色活潑家居</a><br/>
<a href = "#">瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計</a><br/>
</div>
<div id="thirdPage" class = "hide">
<a href = "#">通州豪華3居260萬 二環(huán)稀缺2居250w甩</a><br/>
<a href = "#">西3環(huán)通透2居290萬 130萬2居限量搶購</a><br/>
<a href = "#">黃城根小學(xué)學(xué)區(qū)僅260萬 121平70萬拋!</a><br/>
<a href = "#">獨家別墅280萬 蘇州橋2居優(yōu)惠價248萬</a><br/>
</div>
</div>
</body>
</html>
如對本文有疑問，請?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會為你解答?。?點擊進(jìn)入論壇
