Maison >interface Web >js tutoriel >Implémentation d'onglets universels basés sur JavaScript (forte polyvalence)_compétences javascript

Implémentation d'onglets universels basés sur JavaScript (forte polyvalence)_compétences javascript

WBOYoriginal: 2016-05-16 15:21:111682parcourir

Les onglets sont utilisés dans un grand nombre de sites Web. Bien que les formulaires soient différents, le but à atteindre est le même. Ils sont généralement utilisés pour la classification ou pour économiser de l'espace sur les pages Web. un L'exemple de code de l'onglet est très polyvalent, je vais donc le partager avec vous ci-dessous.

L'exemple de code est le suivant :

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

Le code ci-dessus implémente la fonction de l'onglet. Voici une brève introduction au processus d'implémentation.

1.Principe de mise en œuvre :

Cela peut sembler beaucoup de code, mais le principe est en réalité très simple. Nous ne présenterons ici que brièvement le principe. Pour plus de détails, vous pouvez vous référer aux commentaires du code et vous fier à votre propre réflexion. Dans l'état par défaut, le titre de l'onglet est affiché et le premier titre se voit attribuer la classe de style spécifiée. Seul le contenu du premier onglet est affiché et les autres sont masqués. Dans l'état par défaut, le premier effet sélectionné est obtenu. . Chaque titre d'onglet sera enregistré avec un gestionnaire d'événements spécifié lorsqu'une opération de clic ou de glissement est effectuée, le commutateur correspondant peut être réalisé, principalement via une traversée. Je ne le présenterai pas en détail ici.

2. Commentaires du code :

1.var EventUtil={}, déclare un objet littéral, qui implémente en interne les opérations d'obtention d'objets d'événement, d'objets source d'événement et de liaisons de fonctions de traitement d'événements, et est compatible avec les principaux navigateurs.
2. getEvent:function(event){return event? event: window.event;}, récupère l'objet événement, compatible avec tous les principaux navigateurs.
3.getTarget:function(event){return event.target||event.srcElement;}, obtenez l'objet source d'événement, compatible avec les principaux navigateurs.
4.addHandler:function(element,type,handler){}, la fonction de traitement des événements enregistrée est compatible avec tous les principaux navigateurs.
5.function tabSwitch(inClassName,triggerType){}, cette fonction peut enregistrer la fonction de traitement d'événement spécifiée pour l'objet spécifié. Elle a deux paramètres. Le premier paramètre est le nom de la classe de style, qui est utilisé pour obtenir l'objet avec ce nom. . Deux sont des types d'événements.
6.if(document.querySelectorAll), utilisé pour déterminer si le navigateur prend en charge la fonction querySelectorAll.
7.var tabs=document.querySelectorAll("." inClassName), s'il est pris en charge, obtient l'objet avec le nom de classe spécifié.
8.var divs=document.getElementsByTagName("div"), récupère la collection d'objets div.
9.var tabs=new Array(), crée un tableau pour stocker les objets div avec les classes de style spécifiées.
10.for(var k=0,lenDiv=divs.length;k7f3ea011b875dc187c9f2b52a98cbd5e-1), si le nom de classe de style du div contient le nom de classe de style spécifié.
12. tabs.push(divs[k]), enregistrez ce div dans le tableau.
13.for(var j=0,len=tabs.length;j 14.var tab=tabs[j], attribuez la référence d'un objet div à tab.
15.(function(){})(), déclarez une fonction anonyme et exécutez-la.
16.var nameUl=tab.getElementsByTagName("ul")[0], récupère le premier de la collection ul, qui est la partie titre de l'onglet.
17.var content=tab.getElementsByTagName("ul")[1], récupère la partie contenu de l'onglet.
18.nameUl.getElementsByTagName("li")[0].className="selected", définit la valeur de classe de style du premier titre de la partie titre de l'onglet sur sélectionné.
19.content.getElementsByTagName("li")[0].style.display="block", définit la première partie du contenu de l'onglet à afficher.
20.EventUtil.addHandler(nameUl,triggerType,function(event){}), cette fonction est la partie essentielle de l'implémentation de l'onglet et comporte trois paramètres. Le premier paramètre est l'objet ul de la partie titre et le second est le. type d'événement. , la troisième fonction est la fonction de gestion des événements à enregistrer.
21.var event=EventUtil.getEvent(event), récupère l'objet événement.
22.var target=EventUtil.getTarget(event), récupère l'objet source de l'événement.
23.if(target.nodeName.toLowerCase()=="li"), déterminez si le nom d'étiquette de l'objet source d'événement est li.
24.var nameList=nameUl.getElementsByTagName("li"), obtient la collection d'éléments li dans la partie titre de l'onglet.
25.var contentList=content.getElementsByTagName("li"), récupère la combinaison des éléments li dans la partie contenu de l'onglet.
26.for(var i=0,len=nameList.length;i 27.nameList.className="", efface la classe de style de chaque élément title li.
28.contentList.style.display="none", masquez le li dans la partie contenu de chaque onglet.
29.if(nameList==target), si le titre li de l'index spécifié est l'objet source de l'événement, c'est-à-dire le li actuellement cliqué par la souris ou le li sur lequel la souris glisse.
30.nameList.className="selected", puis ajoutez-y la classe de style spécifiée.
31.contentList.style.display="block" affichera le contenu li correspondant à l'index.

Le contenu ci-dessus est présenté de manière relativement détaillée, avec du code et des commentaires. J'espère qu'il sera utile à tout le monde pour en apprendre davantage sur l'implémentation js des onglets.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Résumé de l'utilisation de la liste déroulante de sélection dans les compétences javascript_javascriptArticle suivant：Résumé de l'utilisation de la liste déroulante de sélection dans les compétences javascript_javascript

Articles Liés

Voir plus