Maison interface Web js tutoriel Comment implémenter plusieurs onglets en javascript en obtenant les compétences class_javascript de l'attribut de balise html

Comment implémenter plusieurs onglets en javascript en obtenant les compétences class_javascript de l'attribut de balise html

May 16, 2016 pm 03:48 PM
class html标签 javascript 属性

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 &#63; 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>

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

Déclaration de ce site Web
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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Remplacer le nom de classe d'un élément à l'aide de jQuery Remplacer le nom de classe d'un élément à l'aide de jQuery Feb 24, 2024 pm 11:03 PM

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 simple : Comment obtenir le code d'état HTTP Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP Jan 05, 2024 pm 06:08 PM

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

Comment supprimer les balises HTML d'une chaîne en PHP ? Comment supprimer les balises HTML d'une chaîne en PHP ? Mar 23, 2024 pm 09:03 PM

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

Comment obtenir facilement le code d'état HTTP en JavaScript Comment obtenir facilement le code d'état HTTP en JavaScript Jan 05, 2024 pm 01:37 PM

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

Explication détaillée de l'utilisation de la classe PHP : rendez votre code plus clair et plus facile à lire Explication détaillée de l'utilisation de la classe PHP : rendez votre code plus clair et plus facile à lire Mar 10, 2024 pm 12:03 PM

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.

Introduction aux attributs du fil du désespoir de Hearthstone Introduction aux attributs du fil du désespoir de Hearthstone Mar 20, 2024 pm 10:36 PM

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 inférieur en CSS syntaxe de l'attribut inférieur en CSS Feb 21, 2024 pm 03:30 PM

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

Que signifie la classe en langage C Que signifie la classe en langage C Jan 03, 2024 am 10:18 AM

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

See all articles