快捷導(dǎo)航

跨瀏覽器通用、可重用的選項卡tab切換js代碼

更新時間：2011年09月20日 22:33:06 投稿：mdxy-dxy

今天一同學(xué)對我說“好吧,我準(zhǔn)備去學(xué)習(xí)”,我大驚,這老勾引我打dota的也去學(xué)習(xí),于是我好奇他學(xué)什么,他說要搞一個選項卡切換js

由于近來學(xué)了點js，于是我裝逼道。。。不太難吧。。。就切一下display屬性？同學(xué)無視我。。說要搞個通用的。。。什么還要跟ajax交互。。？？？我愣是沒有聽懂。。。到底要搞什么。。。權(quán)當(dāng)作練手，我自己胡弄了一個。
　　需求：同學(xué)口中的通用我不知道神馬意思。。。那我就按自己的理解吧。。
　　　?、倏鐬g覽器，IE6+，F(xiàn)F，Chrome，Safari，Opera
　　　?、谕粋€頁面可以用同一個js設(shè)置不同的選項卡。
　　說太多沒啥米用，來看代碼吧。
一、html部分（其實這還沒啥好看的，設(shè)置了三個，前兩個是一樣的，通過click事件觸發(fā)，最后一個通過鼠標(biāo)移動觸發(fā)）

復(fù)制代碼代碼如下:

<div class="tab1">
<ul class="name">
<li>項目一</li>
<li>項目二</li>
<li>項目三</li>
</ul>
<ul class="content">
<li>類為<em>"tab1"</em>項目一內(nèi)容,通過<em>"click"</em>觸發(fā)</li>
<li>類為<em>"tab1"</em>項目二內(nèi)容,通過<em>"click"</em>觸發(fā)</li>
<li>類為<em>"tab1"</em>項目三內(nèi)容,通過<em>"click"</em>觸發(fā)</li>
</ul>
</div>
<div class="tab1">
<ul class="name">
<li>項目一</li>
<li>項目二</li>
<li>項目三</li>
</ul>
<ul class="content">
<li>類為<em>"tab1"</em>項目一內(nèi)容,通過<em>"click"</em>觸發(fā)</li>
<li>類為<em>"tab1"</em>項目二內(nèi)容,通過<em>"click"</em>觸發(fā)</li>
<li>類為<em>"tab1"</em>項目三內(nèi)容,通過<em>"click"</em>觸發(fā)</li>
</ul>
</div>
<div class="tab2">
<ul class="name">
<li>項目一</li>
<li>項目二</li>
<li>項目三</li>
</ul>
<ul class="content">
<li>類為<em>"tab2"</em>項目一內(nèi)容,通過<em>"mouseover"</em>觸發(fā)</li>
<li>類為<em>"tab2"</em>項目二內(nèi)容,通過<em>"mouseover"</em>觸發(fā)</li>
<li>類為<em>"tab2"</em>"項目三內(nèi)容,通過<em>"mouseover"</em>觸發(fā)</li>
</ul>
</div>

特別聲明，由于我是菜鳥，所以，我寫的js只能在某種特定的結(jié)構(gòu)下運作（真菜?。瑳]有想到怎么搞個極致的通用機(jī)制。這個js需要怎樣的結(jié)構(gòu)？那就是最外層一個div容器，標(biāo)題由一個ul列表表示，內(nèi)容也是一個ul列表。如果不是這種格式，我寫的菜鳥代碼是無法運行的（菜啊。。。），要運行，就要改改其中的幾行js啦。。。
二、樣式CSS

復(fù)制代碼代碼如下:

body{
text-align:center;
}
.tab1, .tab2 {
width:350px;
margin:0 5px;
background:#CC9933;
opacity:0.5;
border-radius:5px 5px 5px 5px;
box-shadow: #CCC 4px 4px 4px;
text-align:left;
float:left;
display:inline;
}
.name {
list-style:none;
overflow:hidden;
}
.name li {
width:90px;
font:bold 16px/30px Verdana, Geneva, sans-serif;
background:#669900;
text-align:center;
border-radius:5px 5px 5px;
margin-right:5px;
float:left;
display:inline;
cursor:pointer;
}
li.selected{
background:#FF9900;
}
.content li{
height:500px;
display:none;
}

　這貌似沒什么好說的，加了些最簡單的css3，湊合著（這美工好爛?。?br />三、js代碼

復(fù)制代碼代碼如下:

/**
* 事件處理通用函數(shù)
*/
var EventUtil = {
//跨瀏覽器取事件對象event
getEvent : function(event){
return event ? event : window.event;
},
//款瀏覽器取事件對象的目標(biāo)DOM節(jié)點
getTarget : function(event){
return event.target||event.srcElement;
},
//跨瀏覽器對節(jié)點進(jìn)行事件綁定
addHandler : function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on"+type] = handler;
}
}
};
//設(shè)置選項卡切換方式
tabSwitch("tab1","click");
tabSwitch("tab2","mouseover");
/**
* 選項卡通用函數(shù)
*/
// 傳入?yún)?shù)inClassName設(shè)定為綁定的選項卡類名，參數(shù)triggerType設(shè)定為觸發(fā)切換的類型
function tabSwitch(inClassName,triggerType){
//取得全部選項卡區(qū)域
if(document.querySelectorAll){
var tabs = document.querySelectorAll("."+inClassName);
}else{
var divs = document.getElementsByTagName("div");
var tabs = new Array();
for(var k=0,lenDiv=divs.length; k<lenDiv; k++){
if(divs[k].className.indexOf(inClassName) > -1){
tabs.push(divs[k]);
}
}
}
//為每個選項卡建立切換功能
for(var j=0,len=tabs.length; j<len; j++){
//獲取標(biāo)題和內(nèi)容列表
var tab = tabs[j];
//使用私有作用域為每個選項卡建立切換
(function(){
var nameUl = tab.getElementsByTagName("ul")[0];
var content = tab.getElementsByTagName("ul")[1];
//初始化選項卡
nameUl.getElementsByTagName("li")[0].className = "selected";
content.getElementsByTagName("li")[0].style.display = "block";
//添加事件委托
EventUtil.addHandler(nameUl,triggerType,function(event){
//獲取事件對象
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//選項卡切換
if(target.nodeName.toLowerCase() == "li"){
//分別取得標(biāo)題列表項和內(nèi)容列表項
var nameList = nameUl.getElementsByTagName("li");
var contentList = content.getElementsByTagName("li");
//標(biāo)題添加selected類，并顯示內(nèi)容
for(var i=0,len=nameList.length; i<len; i++){
nameList[i].className = "";
contentList[i].style.display = "none";
if(nameList[i] == target){
nameList[i].className = "selected";
contentList[i].style.display = "block";
}
}
}
});
})();
}
}

就這js函數(shù)，我們展開一下吧（很不害羞啊）。。。首先定義了一些事件對象的通用函數(shù)，以應(yīng)對跨瀏覽器時的使用。接著兩行是選項卡切換的函數(shù)。一個參數(shù)是要定義為選項卡的容器的類，一個是觸發(fā)切換的類型。
　　完了就是真正的js，思路是：定義為某個類的容器將會綁定成一個選項卡，切換的方式也可以自定義。tabSwitch("tab1","click");就是所有tab1類都綁定為選項卡，通過click事件切換。
　　實現(xiàn)切換用到了幾個技術(shù)，其一，通過類選擇器selectqueryAll對同一類型進(jìn)行選擇，為了兼容IE6、7，做了一個備用的遍歷版本（非常低效）；其二，使用了事件委托，在標(biāo)題列表ul上綁定了觸發(fā)事件。
　　
　　抱怨一下，在取ul的DOM元素時，我用了name作為變量名，結(jié)果在chrome和safari綁定不了事件，這里搞了我好久?。》浅Ｓ魫?。。。
　　最后一提的是效果，這個東西有什么效果？就是選項卡切換（廢話。。），選中的選項卡標(biāo)題會添加一個類“selected”，方便設(shè)定樣式。
　　最后的最后，我想說，還真有很多要改進(jìn)的地方（當(dāng)然的，你又不是pis神）。例如，涉及類添加時，類名的字符串并接保證原有類名不覆蓋。例如，可以應(yīng)對一下結(jié)構(gòu)變換的適應(yīng)能力。例如（好多問題啊）。。。
　　至于還有什么毛病，請各位大俠指導(dǎo)了（這人臉皮厚，盡管噴）。
　　按道理要上傳demo的？點此實例下載

您可能感興趣的文章: