Implementierung universeller Tabs basierend auf JavaScript (starke Vielseitigkeit)

Tabs werden in einer großen Anzahl von Websites verwendet, aber der Zweck, den sie erreichen sollen, ist im Allgemeinen derselbe. Sie gelten als scharfes Werkzeug 1. Das Codebeispiel der Registerkarte ist sehr vielseitig, daher werde ich es unten mit Ihnen teilen.

Das Codebeispiel lautet wie folgt:

<!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>

Nach dem Login kopieren

Der obige Code implementiert die Funktion der Registerkarte. Hier finden Sie eine kurze Einführung in den Implementierungsprozess.

1. Umsetzungsprinzip:

Es scheint viel Code zu sein, aber das Prinzip ist eigentlich sehr einfach. Wir werden das Prinzip hier nur kurz vorstellen. Weitere Informationen finden Sie in den Codekommentaren. Im Standardzustand wird der Titel der Registerkarte angezeigt und dem ersten Titel wird nur der Inhalt der ersten Registerkarte angezeigt, während die anderen im Standardzustand ausgeblendet werden . Jeder Tab-Titel wird bei einem bestimmten Ereignishandler registriert, der entsprechende Wechsel kann hauptsächlich durch Durchlaufen realisiert werden. Bitte beachten Sie die Codekommentare.

2. Codekommentare:

1.var EventUtil={} deklariert ein Objektliteral, das intern die Vorgänge zum Abrufen von Ereignisobjekten, Ereignisquellenobjekten und Ereignisverarbeitungsfunktionsbindungen implementiert und mit den wichtigsten Browsern kompatibel ist.
2. getEvent:function(event){return event? event: window.event;}, holen Sie sich das Ereignisobjekt, kompatibel mit allen gängigen Browsern.
3.getTarget:function(event){return event.target||event.srcElement;}, ruft das Ereignisquellenobjekt ab, das mit den wichtigsten Browsern kompatibel ist.
4.addHandler:function(element,type,handler){}, die registrierte Ereignisverarbeitungsfunktion ist mit allen gängigen Browsern kompatibel.
5.Funktion tabSwitch(inClassName,triggerType){}, diese Funktion kann die angegebene Ereignisverarbeitungsfunktion für das angegebene Objekt registrieren. Der erste Parameter ist der Stilklassenname, der zum Abrufen des Objekts mit diesem Namen verwendet wird . Zwei davon sind Ereignistypen.
6.if(document.querySelectorAll), wird verwendet, um zu bestimmen, ob der Browser die Funktion querySelectorAll unterstützt.
7.var tabs=document.querySelectorAll("." inClassName) ruft, sofern unterstützt, das Objekt mit dem angegebenen Klassennamen ab.
8.var divs=document.getElementsByTagName("div"), ruft die Sammlung von div-Objekten ab.
9.var tabs=new Array(), erstellt ein Array zum Speichern von div-Objekten mit angegebenen Stilklassen.
10.for(var k=0,lenDiv=divs.length;k 11.if(divs[k].className.indexOf(inClassName)>-1), wenn der Stilklassenname des Div den angegebenen Stilklassennamen enthält.
12. tabs.push(divs[k]), speichere dieses Div im Array.
13.for(var j=0,len=tabs.length;j 14.var tab=tabs[j], weisen Sie der Registerkarte die Referenz eines div-Objekts zu.
15.(function(){})(), deklarieren Sie eine anonyme Funktion und führen Sie sie aus.
16.var nameUl=tab.getElementsByTagName("ul")[0], holen Sie sich den ersten in der ul-Sammlung, der den Titelteil der Registerkarte darstellt.
17.var content=tab.getElementsByTagName("ul")[1], holen Sie sich den Inhaltsteil der Registerkarte.
18.nameUl.getElementsByTagName("li")[0].className="selected", setzt den Stilklassenwert des ersten Titels im Tab-Titelteil auf ausgewählt.
19.content.getElementsByTagName("li")[0].style.display="block", legt den ersten Inhaltsteil der Registerkarte fest, der angezeigt werden soll.
20.EventUtil.addHandler(nameUl,triggerType,function(event){}), diese Funktion ist der Kernteil der Tab-Implementierung und verfügt über drei Parameter. Der erste Parameter ist das UL-Objekt des Titelteils und der zweite ist der Ereignistyp, die dritte Funktion ist die zu registrierende Ereignisbehandlungsfunktion.
21.var event=EventUtil.getEvent(event), holen Sie sich das Ereignisobjekt.
22.var target=EventUtil.getTarget(event), ruft das Ereignisquellenobjekt ab.
23.if(target.nodeName.toLowerCase()=="li"), bestimmen Sie, ob der Labelname des Ereignisquellenobjekts li ist.
24.var nameList=nameUl.getElementsByTagName("li"), ruft die Sammlung von li-Elementen im Tab-Titelteil ab.
25.var contentList=content.getElementsByTagName("li"), ruft die Kombination der li-Elemente im Tab-Inhaltsteil ab.
26.for(var i=0,len=nameList.length;i 27.nameList.className="", löscht die Stilklasse jedes Titel-li-Elements.
28.contentList.style.display="none", verstecke das Li im Inhaltsteil jeder Registerkarte.
29.if(nameList==target), wenn die Titel-LI des angegebenen Indexes das Ereignisquellenobjekt ist, also die aktuell mit der Maus angeklickte LI oder die LI, über die die Maus gleitet.
30.nameList.className="selected" und fügen Sie dann die angegebene Stilklasse hinzu.
31.contentList.style.display="block" zeigt den Inhalt li an, der dem Index entspricht.

Der obige Inhalt wird relativ detailliert vorgestellt, mit Code und Kommentaren. Ich hoffe, dass er für alle hilfreich ist, um mehr über die Implementierung von Tabs in js zu erfahren.

Implementierung universeller Tabs basierend auf JavaScript (starke Vielseitigkeit)_Javascript-Kenntnisse