基於JavaScript實作通用tab選項卡(通用性強)_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

基於JavaScript實作通用tab選項卡(通用性強)_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:21 PM

選項卡在大量的網站都有應用，雖然形式各有不同，但是索要達成的目的都是一樣的，一般都是為了進行分類或者節省網頁空間只用，算是一件利器，下面就是一個選項卡的程式碼實例，通用性很強，下面就跟大家分享一下。

程式碼實例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>js实现的可以通用的选项卡代码实例</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">
/** 
* 事件处理通用函数
*/
var EventUtil={
getEvent:function(event)
{
return event &#63; 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;
} 
}
};
/**
* 选项卡通用函数
*/
// 传入参数inClassName设定为绑定的选项卡类名，参数triggerType设定为触发切换的类型
function tabSwitch(inClassName,triggerType){
//取得全部选项卡区域
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++)
{
//获取标题和内容列表
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")
{
//分别取得标题列表项和内容列表项
var nameList = nameUl.getElementsByTagName("li");
var contentList = content.getElementsByTagName("li");
//标题添加selected类，并显示内容
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()
{
//设置选项卡切换方式
tabSwitch("tab1","click");
tabSwitch("tab2","mouseover");
}
</script>
</head>
<body>
<div class="tab1">
<ul class="name">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
<ul class="content">
<li>类为<em>"tab1"</em>项目一内容,通过<em>"click"</em>触发</li>
<li>类为<em>"tab1"</em>项目二内容,通过<em>"click"</em>触发</li>
<li>类为<em>"tab1"</em>项目三内容,通过<em>"click"</em>触发</li>
</ul>
</div>
<div class="tab1">
<ul class="name">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
<ul class="content">
<li>类为<em>"tab1"</em>项目一内容,通过<em>"click"</em>触发</li>
<li>类为<em>"tab1"</em>项目二内容,通过<em>"click"</em>触发</li>
<li>类为<em>"tab1"</em>项目三内容,通过<em>"click"</em>触发</li>
</ul>
</div>
<div class="tab2">
<ul class="name">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
<ul class="content">
<li>类为<em>"tab2"</em>项目一内容,通过<em>"mouseover"</em>触发</li>
<li>类为<em>"tab2"</em>项目二内容,通过<em>"mouseover"</em>触发</li>
<li>类为<em>"tab2"</em>"项目三内容,通过<em>"mouseover"</em>触发</li>
</ul>
</div>
</body>
</html>

以上程式碼實現了選項卡的功能，以下就簡單介紹一下實作過程。

一.實現原理:

看起來程式碼一大堆，其實原理非常的簡單，咱們這裡只簡單的介紹一下原理，具體可以參閱程式碼註解依靠自己的思考。在預設狀態標籤的標題是顯示的，並且第一個標題並賦予指定的樣式類，選項卡內容只有第一個是顯示的，其他的都出於隱藏狀態，這樣就實現了，預設狀態下第一個被選中的效果。每個選項卡標題都會被註冊指定的事件處理函數，當進行點擊或劃過操作時候，能夠實現相應的切換，主要是透過遍歷實現的，這裡不多介紹了，參閱程式碼註解吧。

二.程式碼註解:

1.var EventUtil={}，聲明了一個對象直接量，它的內部實現了獲取事件對象，事件源對象和事件處理函數綁定的操作，並且兼容了各大瀏覽器。
2. getEvent:function(event){return event ? event : window.event;}，取得事件對象，相容於各大瀏覽器。
3.getTarget:function(event){return event.target||event.srcElement;}，取得事件來源對象，相容於各大瀏覽器。
4.addHandler:function(element,type,handler){}，註冊事件處理函數相容於各大瀏覽器。
5.function tabSwitch(inClassName,triggerType){}，此函數可以為指定的物件註冊指定事件處理函數，具有兩個參數，第一個參數是樣式類別名稱，用來取得具有此類名稱的對象，第二個是事件類型。
6.if(document.querySelectorAll)，用來判斷瀏覽器是否支援querySelectorAll函數。
7.var tabs=document.querySelectorAll("."+inClassName)，如果支援則取得具有指定類別名稱的物件。
8.var divs=document.getElementsByTagName("div")，取得div物件集合。
9.var tabs=new Array()，建立一個數組，用語儲存具有指定樣式類別的div物件。
10.for(var k=0,lenDiv=divs.length;k 11.if(divs[k].className.indexOf(inClassName)>-1)，如果div的樣式類別名稱含有指定的樣式類別名稱。
12. tabs.push(divs[k])，將此div存入數組。
13.for(var j=0,len=tabs.length;j 14.var tab=tabs[j]，將一個div物件的引用賦值給tab。
15.(function(){})()，宣告一個匿名函數，並執行。
16.var nameUl=tab.getElementsByTagName("ul")[0]，取得ul集合中的第一個，也就是選項卡的標題部分。
17.var content=tab.getElementsByTagName("ul")[1]，取得選項卡的內容部分。
18.nameUl.getElementsByTagName("li")[0].className="selected"，將選項卡標題部分的第一個標題的樣式class值設為selected。
19.content.getElementsByTagName("li")[0].style.display="block"，將選項卡內容部分的第一個設定為顯示。
20.EventUtil.addHandler(nameUl,triggerType,function(event){})，此函數是實作選項卡的核心部分，具有三個參數，第一個參數是標題部分的ul對象，第二個是事件類型，第三個函數是要註冊的事件處理函數。
21.var event=EventUtil.getEvent(event)，取得事件物件。
22.var target=EventUtil.getTarget(event)，取得事件來源物件。
23.if(target.nodeName.toLowerCase()=="li")，判斷事件來源物件的標籤名稱是否為li。
24.var nameList=nameUl.getElementsByTagName("li")，取得選項卡標題部分li元素集合。
25.var contentList=content.getElementsByTagName("li")，取得選項卡內容部分li元素結合。
26.for(var i=0,len=nameList.length;i 27.nameList.className=""，將每一個標題li元素樣式類別清除。
28.contentList.style.display="none"，將每個選項卡內容部分的li隱藏。
29.if(nameList==target)，如果指定索引的標題li就是為事件來源對象，也就是說滑鼠目前點擊的li或滑鼠滑過的li。
30.nameList.className="selected"，那麼就為它新增指定的樣式類別。
31.contentList.style.display="block"，將對應索引的內容li顯示。

以上內容介紹的還算比較詳細，有程式碼，有註釋，希望對大家學習js實作選項卡相關知識有所幫助。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。

C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。1）C 用于解析JavaScript源码并生成抽象语法树。2）C 负责生成和执行字节码。3）C 实现JIT编译器，在运行时优化和编译热点代码，显著提高JavaScript的执行效率。

JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。