


Comment implémenter plusieurs onglets en javascript en obtenant les compétences class_javascript de l'attribut de balise html
L'exemple de cet article décrit comment javascript implémente plusieurs onglets en obtenant la classe d'attributs de balise html. Partagez-le avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante :
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>原生javascript通过获取html标签属性class实现多选项卡</title> <style type="text/css"> .tab { clear: both; margin: 20px auto; padding: 10px; width: 680px; overflow: hidden; } .tab .tab-menu { margin: 0; padding: 0; list-style: none; } .tab .tab-menu li { display: inline; margin: 0 2px 0 0; } .tab .tab-menu li a { padding: 0 1em; text-decoration: none; color: #a80; background: #fe5; } .tab .tab-menu li a:hover { background: #fc0; color: #540; } .tab .tab-menu .active { } .tab .tab-menu .active a { padding-bottom: 2px; font-weight: bold; color: black; background: #fc0; } .tab .tab-panel { padding: 1em; border: 2px solid #fc0; background: #fff; } .tab .tab-panel h2 { font-size: 1.5em; color: #fc0; } .tab .tab-none { display: none; } </style> <script type="text/javascript"> function Tab(style, scope){ this.oItem = this.getByClass(style, scope); this.init(); } Tab.prototype = { init: function(){ var that = this, menu, m; for(var i = 0, len = this.oItem.length; i < len; i++){ menu = this.oItem[i].getElementsByTagName('li'); for(var j = 0, mLen = menu.length; j < mLen; j++){ m = menu[j]; m.index = j; m.onmouseover = function(){that.focus(this);} } } }, focus: function(o){ var par = o.parentNode.parentNode, panel = par.getElementsByTagName('div'), btn = par.getElementsByTagName('li'), len = btn.length; for(var i = 0; i < len; i++){ btn[i].className = ''; panel[i].className = this.changeClass(panel[i].className, 'tab-none', true); } o.className = 'active'; panel[o.index].className = this.changeClass(panel[o.index].className, 'tab-none', false); }, changeClass: function(cl, cl2, add){ var flag; if(cl.match(cl2) != null) flag = true; if(add ^ flag) return flag ? cl.replace(cl2, '') : cl += ' ' + cl2; return cl; }, getByClass: function(cla, obj){ var obj = obj || document, arr = []; if(document.getElementsByClassName){ return document.getElementsByClassName(cla); } else { var all = obj.getElementsByTagName('*'); for(var i = 0, len = all.length; i < len; i++){ if(all[i].className.match(cla) != null) arr.push(all[i]); } return arr; } } } window.onload = function(){ new Tab('tab-menu', null); } </script> </head> <body> <div class="tab"> <ul class="tab-menu"> <li class="active"><a href="">111</a></li> <li><a href="">122</a></li> <li><a href="">133</a></li> </ul> <div class="tab-panel"> 111 </div> <div class="tab-panel tab-none"> 122 </div> <div class="tab-panel tab-none"> 133 </div> </div> <div class="tab"> <ul class="tab-menu"> <li class="active"><a href="">211</a></li> <li><a href="">222</a></li> <li><a href="">233</a></li> </ul> <div class="tab-panel"> 211 </div> <div class="tab-panel tab-none"> 222 </div> <div class="tab-panel tab-none"> 233 </div> </div> <div class="tab"> <ul class="tab-menu"> <li class="active"><a href="">311</a></li> <li><a href="">322</a></li> <li><a href="">333</a></li> </ul> <div class="tab-panel"> 311 </div> <div class="tab-panel tab-none"> 322 </div> <div class="tab-panel tab-none"> 333 </div> </div> </body> </html>
J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

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

AI Hentai Generator
Générez AI Hentai gratuitement.

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)

Sujets chauds

jQuery est une bibliothèque JavaScript classique largement utilisée dans le développement Web. Elle simplifie les opérations telles que la gestion des événements, la manipulation des éléments DOM et l'exécution d'animations sur les pages Web. Lorsque vous utilisez jQuery, vous rencontrez souvent des situations dans lesquelles vous devez remplacer le nom de classe d'un élément. Cet article présentera quelques méthodes pratiques et des exemples de code spécifiques. 1. Utilisez les méthodes RemoveClass() et AddClass(). JQuery fournit la méthode RemoveClass() pour la suppression.

Tutoriel JavaScript : Comment obtenir le code d'état HTTP, des exemples de code spécifiques sont requis Préface : Dans le développement Web, l'interaction des données avec le serveur est souvent impliquée. Lors de la communication avec le serveur, nous devons souvent obtenir le code d'état HTTP renvoyé pour déterminer si l'opération a réussi et effectuer le traitement correspondant en fonction de différents codes d'état. Cet article vous apprendra comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournira quelques exemples de codes pratiques. Utilisation de XMLHttpRequest

PHP est un langage de script côté serveur couramment utilisé dans le développement de sites Web et le développement d'applications back-end. Lors du développement d'un site Web ou d'une application, vous rencontrez souvent des situations dans lesquelles vous devez traiter des balises HTML dans des chaînes. Cet article explique comment utiliser PHP pour supprimer les balises HTML des chaînes et fournit des exemples de code spécifiques. Pourquoi devez-vous supprimer les balises HTML ? Les balises HTML sont souvent incluses lors du traitement des entrées utilisateur ou du texte obtenu à partir d'une base de données. Parfois, nous souhaitons supprimer ces balises HTML lors de l'affichage du texte

Introduction à la méthode d'obtention du code d'état HTTP en JavaScript : Dans le développement front-end, nous devons souvent gérer l'interaction avec l'interface back-end, et le code d'état HTTP en est une partie très importante. Comprendre et obtenir les codes d'état HTTP nous aide à mieux gérer les données renvoyées par l'interface. Cet article explique comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournit des exemples de code spécifiques. 1. Qu'est-ce que le code d'état HTTP ? Le code d'état HTTP signifie que lorsque le navigateur lance une requête au serveur, le service

Lors de l’écriture de code PHP, l’utilisation de classes est une pratique très courante. En utilisant des classes, nous pouvons encapsuler les fonctions et les données associées dans une seule unité, rendant le code plus clair, plus facile à lire et à maintenir. Cet article présentera en détail l'utilisation de PHPClass et fournira des exemples de code spécifiques pour aider les lecteurs à mieux comprendre comment appliquer des classes pour optimiser le code dans des projets réels. 1. Créer et utiliser des classes En PHP, vous pouvez utiliser le mot-clé class pour définir une classe et définir les propriétés et méthodes de la classe.

Fil du désespoir est une carte rare du chef-d'œuvre de Blizzard Entertainment "Hearthstone" et a une chance d'être obtenue dans le pack de cartes "Wizbane's Workshop". Peut consommer 100/400 points de poussière arcanique pour synthétiser la version normale/or. Introduction aux attributs du Fil du Désespoir de Hearthstone : Il peut être obtenu dans le pack de cartes de l'atelier de Wizbane avec une chance, ou il peut également être synthétisé via de la poussière arcanique. Rareté : Rare Type : Classe de sort : Chevalier de la mort Mana : 1 Effet : Donne à tous les serviteurs un Râle d'agonie : Inflige 1 dégât à tous les serviteurs

Syntaxe de l'attribut bottom et exemples de code en CSS En CSS, l'attribut bottom est utilisé pour spécifier la distance entre un élément et le bas du conteneur. Il contrôle la position d'un élément par rapport au bas de son élément parent. La syntaxe de l'attribut bottom est la suivante : element{bottom:value;} où element représente l'élément auquel le style doit être appliqué et value représente la valeur inférieure à définir. la valeur peut être une valeur de longueur spécifique, telle que des pixels

En langage C, « class » est un mot-clé utilisé pour définir une classe.
