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
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 ? 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;k
12. tabs.push(divs[k]), enregistrez ce div dans le tableau.
13.for(var j=0,len=tabs.length;j
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
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.
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal?
Apr 04, 2025 pm 02:42 PM
Des questions et des solutions fréquemment posées pour l'impression de billets thermiques frontaux pour le développement frontal, l'impression de billets est une exigence commune. Cependant, de nombreux développeurs mettent en œuvre ...
Qui est payé plus de python ou de javascript?
Apr 04, 2025 am 12:09 AM
Il n'y a pas de salaire absolu pour les développeurs Python et JavaScript, selon les compétences et les besoins de l'industrie. 1. Python peut être davantage payé en science des données et en apprentissage automatique. 2. JavaScript a une grande demande dans le développement frontal et complet, et son salaire est également considérable. 3. Les facteurs d'influence comprennent l'expérience, la localisation géographique, la taille de l'entreprise et les compétences spécifiques.
Démystifier javascript: ce qu'il fait et pourquoi c'est important
Apr 09, 2025 am 12:07 AM
JavaScript est la pierre angulaire du développement Web moderne, et ses principales fonctions incluent la programmation axée sur les événements, la génération de contenu dynamique et la programmation asynchrone. 1) La programmation axée sur les événements permet aux pages Web de changer dynamiquement en fonction des opérations utilisateur. 2) La génération de contenu dynamique permet d'ajuster le contenu de la page en fonction des conditions. 3) La programmation asynchrone garantit que l'interface utilisateur n'est pas bloquée. JavaScript est largement utilisé dans l'interaction Web, les applications à une page et le développement côté serveur, améliorant considérablement la flexibilité de l'expérience utilisateur et du développement multiplateforme.
Comment fusionner les éléments du tableau avec le même ID dans un seul objet en utilisant JavaScript?
Apr 04, 2025 pm 05:09 PM
Comment fusionner les éléments du tableau avec le même ID dans un seul objet en JavaScript? Lors du traitement des données, nous rencontrons souvent la nécessité d'avoir le même ID ...
La différence dans Console.Log de sortie Résultat: Pourquoi les deux appels sont-ils différents?
Apr 04, 2025 pm 05:12 PM
Discussion approfondie des causes profondes de la différence de sortie Console.log. Cet article analysera les différences dans les résultats de sortie de la fonction Console.log dans un morceau de code et expliquera les raisons derrière. � ...
Comment réaliser des effets de défilement de parallaxe et d'animation des éléments, comme le site officiel de Shiseido?
ou:
Comment pouvons-nous réaliser l'effet d'animation accompagné d'un défilement de page comme le site officiel de Shiseido?
Apr 04, 2025 pm 05:36 PM
La discussion sur la réalisation des effets de défilement de parallaxe et d'animation des éléments dans cet article explorera comment réaliser le site officiel de Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ...
JavaScript est-il difficile à apprendre?
Apr 03, 2025 am 12:20 AM
Apprendre JavaScript n'est pas difficile, mais c'est difficile. 1) Comprendre les concepts de base tels que les variables, les types de données, les fonctions, etc. 2) Master la programmation asynchrone et les implémenter via des boucles d'événements. 3) Utilisez les opérations DOM et promettez de gérer les demandes asynchrones. 4) Évitez les erreurs courantes et utilisez des techniques de débogage. 5) Optimiser les performances et suivre les meilleures pratiques.
Comment implémenter la fonction de glisser-déposer et de régler la fonction de réglage similaire à VScode dans le développement frontal?
Apr 04, 2025 pm 02:06 PM
Explorez la mise en œuvre de la fonction de glisser et de réglage du panneau de type VScode dans le frontal. Dans le développement frontal, comment implémenter un VScode comme ...
