基于JavaScript實(shí)現(xiàn)通用tab選項(xiàng)卡(通用性強(qiáng))
選項(xiàng)卡在大量的網(wǎng)站都有應(yīng)用，雖然形式各有不同，但是索要達(dá)成的目的都是一樣的，一般都是為了進(jìn)行分類(lèi)或者節(jié)省網(wǎng)頁(yè)空間只用，算是一件利器，下面就是一個(gè)選項(xiàng)卡的代碼實(shí)例，通用性很強(qiáng)，下面就和大家分享一下。
代碼實(shí)例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dbjr.com.cn/" />
<title>js實(shí)現(xiàn)的可以通用的選項(xiàng)卡代碼實(shí)例</title>
<style type="text/css">
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;
}
</style>
<script type="text/javascript">
/**
* 事件處理通用函數(shù)
*/
var EventUtil={
getEvent:function(event)
{
return event ? event : window.event;
},
getTarget:function(event)
{
return event.target||event.srcElement;
},
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;
}
}
};
/**
* 選項(xiàng)卡通用函數(shù)
*/
// 傳入?yún)?shù)inClassName設(shè)定為綁定的選項(xiàng)卡類(lèi)名，參數(shù)triggerType設(shè)定為觸發(fā)切換的類(lèi)型
function tabSwitch(inClassName,triggerType){
//取得全部選項(xiàng)卡區(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]);
}
}
}
//為每個(gè)選項(xiàng)卡建立切換功能
for(var j=0,len=tabs.length; j<len; j++)
{
//獲取標(biāo)題和內(nèi)容列表
var tab = tabs[j];
//使用私有作用域?yàn)槊總€(gè)選項(xiàng)卡建立切換
(function(){
var nameUl = tab.getElementsByTagName("ul")[0];
var content = tab.getElementsByTagName("ul")[1];
//初始化選項(xiàng)卡
nameUl.getElementsByTagName("li")[0].className = "selected";
content.getElementsByTagName("li")[0].style.display = "block";
//添加事件委托
EventUtil.addHandler(nameUl,triggerType,function(event)
{
//獲取事件對(duì)象
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//選項(xiàng)卡切換
if(target.nodeName.toLowerCase() == "li")
{
//分別取得標(biāo)題列表項(xiàng)和內(nèi)容列表項(xiàng)
var nameList = nameUl.getElementsByTagName("li");
var contentList = content.getElementsByTagName("li");
//標(biāo)題添加selected類(lèi)，并顯示內(nèi)容
for(var i=0,len=nameList.length; i<len; i++)
{
nameList[i].className = "";
contentList.style.display = "none";
if(nameList == target)
{
nameList.className = "selected";
contentList.style.display = "block";
}
}
}
});
})();
}
}
window.onload=function()
{
//設(shè)置選項(xiàng)卡切換方式
tabSwitch("tab1","click");
tabSwitch("tab2","mouseover");
}
</script>
</head>
<body>
<div class="tab1">
<ul class="name">
<li>項(xiàng)目一</li>
<li>項(xiàng)目二</li>
<li>項(xiàng)目三</li>
</ul>
<ul class="content">
<li>類(lèi)為<em>"tab1"</em>項(xiàng)目一內(nèi)容,通過(guò)<em>"click"</em>觸發(fā)</li>
<li>類(lèi)為<em>"tab1"</em>項(xiàng)目二內(nèi)容,通過(guò)<em>"click"</em>觸發(fā)</li>
<li>類(lèi)為<em>"tab1"</em>項(xiàng)目三內(nèi)容,通過(guò)<em>"click"</em>觸發(fā)</li>
</ul>
</div>
<div class="tab1">
<ul class="name">
<li>項(xiàng)目一</li>
<li>項(xiàng)目二</li>
<li>項(xiàng)目三</li>
</ul>
<ul class="content">
<li>類(lèi)為<em>"tab1"</em>項(xiàng)目一內(nèi)容,通過(guò)<em>"click"</em>觸發(fā)</li>
<li>類(lèi)為<em>"tab1"</em>項(xiàng)目二內(nèi)容,通過(guò)<em>"click"</em>觸發(fā)</li>
<li>類(lèi)為<em>"tab1"</em>項(xiàng)目三內(nèi)容,通過(guò)<em>"click"</em>觸發(fā)</li>
</ul>
</div>
<div class="tab2">
<ul class="name">
<li>項(xiàng)目一</li>
<li>項(xiàng)目二</li>
<li>項(xiàng)目三</li>
</ul>
<ul class="content">
<li>類(lèi)為<em>"tab2"</em>項(xiàng)目一內(nèi)容,通過(guò)<em>"mouseover"</em>觸發(fā)</li>
<li>類(lèi)為<em>"tab2"</em>項(xiàng)目二內(nèi)容,通過(guò)<em>"mouseover"</em>觸發(fā)</li>
<li>類(lèi)為<em>"tab2"</em>"項(xiàng)目三內(nèi)容,通過(guò)<em>"mouseover"</em>觸發(fā)</li>
</ul>
</div>
</body>
</html>
以上代碼實(shí)現(xiàn)了選項(xiàng)卡的功能，下面就簡(jiǎn)單介紹一下實(shí)現(xiàn)過(guò)程。
一.實(shí)現(xiàn)原理:
看上去代碼一大堆，其實(shí)原理非常的簡(jiǎn)單，咱們這里只簡(jiǎn)單的介紹一下原理，具體可以參閱代碼注釋依靠自己的思考。在默認(rèn)狀態(tài)選項(xiàng)卡的標(biāo)題是顯示的，并且第一個(gè)標(biāo)題并賦予指定的樣式類(lèi)，選項(xiàng)卡內(nèi)容只有第一個(gè)是顯示的，其他的都出于隱藏狀態(tài)，這樣就實(shí)現(xiàn)了，默認(rèn)狀態(tài)下第一個(gè)被選中的效果。每一個(gè)選項(xiàng)卡標(biāo)題都會(huì)被注冊(cè)指定的事件處理函數(shù)，當(dāng)進(jìn)行點(diǎn)擊或者劃過(guò)操作時(shí)候，能夠?qū)崿F(xiàn)相應(yīng)的切換，主要是通過(guò)遍歷實(shí)現(xiàn)的，這里不多介紹了，參閱代碼注釋吧。
二.代碼注釋:
1.var EventUtil={}，聲明了一個(gè)對(duì)象直接量，它的內(nèi)部實(shí)現(xiàn)了獲取事件對(duì)象，事件源對(duì)象和事件處理函數(shù)綁定的操作，并且兼容了各大瀏覽器。
2. getEvent:function(event){return event ? event : window.event;}，獲取事件對(duì)象，兼容各大瀏覽器。
3.getTarget:function(event){return event.target||event.srcElement;}，獲取事件源對(duì)象，兼容各大瀏覽器。
4.addHandler:function(element,type,handler){}，注冊(cè)事件處理函數(shù)兼容各大瀏覽器。
5.function tabSwitch(inClassName,triggerType){}，此函數(shù)可以為指定的對(duì)象注冊(cè)指定事件處理函數(shù)，具有兩個(gè)參數(shù)，第一個(gè)參數(shù)是樣式類(lèi)名稱(chēng)，用來(lái)獲取具有此類(lèi)名的對(duì)象，第二個(gè)是事件類(lèi)型。
6.if(document.querySelectorAll)，用來(lái)判斷瀏覽器是否支持querySelectorAll函數(shù)。
7.var tabs=document.querySelectorAll("."+inClassName)，如果支持則獲取具有指定類(lèi)名稱(chēng)的對(duì)象。
8.var divs=document.getElementsByTagName("div")，獲取div對(duì)象集合。
9.var tabs=new Array()，創(chuàng)建一個(gè)數(shù)組，用語(yǔ)存儲(chǔ)具有指定樣式類(lèi)的div對(duì)象。
10.for(var k=0,lenDiv=divs.length;k<lenDiv;k++)，遍歷獲取的div對(duì)象集合。
11.if(divs[k].className.indexOf(inClassName)>-1)，如果div的樣式類(lèi)名稱(chēng)含有指定的樣式類(lèi)名稱(chēng)。
12. tabs.push(divs[k])，將此div存入數(shù)組。
13.for(var j=0,len=tabs.length;j<len;j++)，遍歷存有div的數(shù)組，在本例中也就是class屬性值為tab1和tab2的div。
14.var tab=tabs[j]，將一個(gè)div對(duì)象的引用賦值給tab。
15.(function(){})()，聲明一個(gè)匿名函數(shù)，并執(zhí)行。
16.var nameUl=tab.getElementsByTagName("ul")[0]，獲取ul集合中的第一個(gè)，也就是選項(xiàng)卡的標(biāo)題部分。
17.var content=tab.getElementsByTagName("ul")[1]，獲取選項(xiàng)卡的內(nèi)容部分。
18.nameUl.getElementsByTagName("li")[0].className="selected"，將選項(xiàng)卡標(biāo)題部分的第一個(gè)標(biāo)題的樣式class值設(shè)置為selected。
19.content.getElementsByTagName("li")[0].style.display="block"，將選項(xiàng)卡內(nèi)容部分的第一個(gè)設(shè)置為顯示。
20.EventUtil.addHandler(nameUl,triggerType,function(event){})，此函數(shù)是實(shí)現(xiàn)選項(xiàng)卡的核心部分，具有三個(gè)參數(shù)，第一個(gè)參數(shù)是標(biāo)題部分的ul對(duì)象，第二個(gè)是事件類(lèi)型，第三個(gè)函數(shù)是要被注冊(cè)的事件處理函數(shù)。
21.var event=EventUtil.getEvent(event)，獲取事件對(duì)象。
22.var target=EventUtil.getTarget(event)，獲取事件源對(duì)象。
23.if(target.nodeName.toLowerCase()=="li")，判斷事件源對(duì)象的標(biāo)簽名稱(chēng)是否是li。
24.var nameList=nameUl.getElementsByTagName("li")，獲取選項(xiàng)卡標(biāo)題部分li元素集合。
25.var contentList=content.getElementsByTagName("li")，獲取選項(xiàng)卡內(nèi)容部分li元素結(jié)合。
26.for(var i=0,len=nameList.length;i<len;i++)，遍歷li元素集合。
27.nameList.className=""，將每一個(gè)標(biāo)題li元素樣式類(lèi)清除。
28.contentList.style.display="none"，將每一個(gè)選項(xiàng)卡內(nèi)容部分的li隱藏。
29.if(nameList==target)，如果指定索引的標(biāo)題li就是為事件源對(duì)象，也就是說(shuō)鼠標(biāo)當(dāng)前點(diǎn)擊的li或者鼠標(biāo)滑過(guò)的li。
30.nameList.className="selected"，那么就為它添加指定的樣式類(lèi)。
31.contentList.style.display="block"，將對(duì)應(yīng)索引的內(nèi)容li顯示。
以上內(nèi)容介紹的還算比較詳細(xì)，有代碼，有注釋?zhuān)Ｍ麑?duì)大家學(xué)習(xí)js實(shí)現(xiàn)選項(xiàng)卡相關(guān)知識(shí)有所幫助。
- javascript實(shí)現(xiàn)表現(xiàn)、結(jié)構(gòu)、行為分離的選項(xiàng)卡效果！
- javascript漸變顯示的雅虎中國(guó)選項(xiàng)卡效果代碼
- 用javascript實(shí)現(xiàn)的不錯(cuò)的一款網(wǎng)頁(yè)選項(xiàng)卡
- javascript橫排豎排標(biāo)準(zhǔn)選項(xiàng)卡效果代碼
- js實(shí)現(xiàn)tab選項(xiàng)卡函數(shù)代碼
- JavaScript瀏覽器選項(xiàng)卡效果
- 純php打造的tab選項(xiàng)卡效果代碼(不用js)
- 跨瀏覽器通用、可重用的選項(xiàng)卡tab切換js代碼
- 利用js實(shí)現(xiàn)選項(xiàng)卡的特別效果的實(shí)例
- javascript實(shí)現(xiàn)tabs選項(xiàng)卡切換效果(自寫(xiě)原生js)
- jsp js鼠標(biāo)移動(dòng)到指定區(qū)域顯示選項(xiàng)卡離開(kāi)時(shí)隱藏示例
- js/jQuery簡(jiǎn)單實(shí)現(xiàn)選項(xiàng)卡功能
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)分割上傳大文件的相關(guān)資料,需要的朋友可以參考下2016-03-03
js實(shí)現(xiàn)簡(jiǎn)單圓盤(pán)時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單圓盤(pán)時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Javascript幻燈片播放功能實(shí)現(xiàn)過(guò)程解析
這篇文章主要介紹了Javascript幻燈片播放功能實(shí)現(xiàn)過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
JavaScript實(shí)現(xiàn)簡(jiǎn)單圖片輪播效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單圖片輪播效果，點(diǎn)擊下標(biāo)切換到該圖片上，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
JavaScript省市級(jí)聯(lián)下拉菜單實(shí)例
這篇文章主要為大家詳細(xì)介紹了JavaScript省市級(jí)聯(lián)下拉菜單實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
js學(xué)習(xí)筆記之class類(lèi)、super和extends關(guān)鍵詞
es6提供了一個(gè)新語(yǔ)法就是class,下面這篇文章主要給大家介紹了關(guān)于js學(xué)習(xí)筆記之class類(lèi)、super和extends關(guān)鍵詞的相關(guān)資料,需要的朋友可以參考下2021-08-08
JavaScript實(shí)現(xiàn)自動(dòng)對(duì)頁(yè)面上敏感詞進(jìn)行屏蔽的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)自動(dòng)對(duì)頁(yè)面上敏感詞進(jìn)行屏蔽的方法,涉及javascript針對(duì)頁(yè)面字符串查找及替換的相關(guān)技巧,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了如何判斷元素是否為HTMLElement元素。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
這篇文章主要給大家介紹了一道關(guān)于閉包bind、this的面試題，文中給出了詳細(xì)的示例代碼，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-02-02
判斷一個(gè)變量是數(shù)組Array類(lèi)型的方法
JavaScript中如何判斷一個(gè)變量是數(shù)組Array類(lèi)型呢？本文向大家提供一個(gè)比較不錯(cuò)的方法，可以說(shuō)是無(wú)懈可擊了2013-09-09