communauté

Apprendre

Bibliothèque d'outils

Outils d'IA

Loisirs

Français

Maison > interface Web > js tutoriel > Implémentation simple de jQuery tab_jquery

Implémentation simple de jQuery tab_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Libérer： 2016-05-16 16:57:56

original

841 Les gens l'ont consulté

jQuery implémente la fonction de tabulation. Configurez d’abord l’interface.

Il y a un tab_menu d'en-tête de navigation et un tab_box de contenu.

L'effet à obtenir est qu'après avoir cliqué, le contenu correspondant sera affiché et les autres contenus seront masqués.

En même temps, afin d'afficher le statut sélectionné, un arrière-plan est ajouté à l'élément sélectionné pour montrer la différence.

Cette fois, j'ai écrit le code moi-même. Regardons d'abord la partie html :

Copiez le code Le code est comme suit :

 ;/li>
 < ;div class="tab_box"> hide">Divertissement
 ;

En HTML, vous avez besoin d'un grand div avec deux sous-divs à l'intérieur. L'un sert de tab_menu d'en-tête de navigation, et l'autre sert de tab_box du corps du contenu. Le code CSS est responsable de la présentation du contenu HTML.

partie css :

Copier le code

Le code est le suivant :

*{margin :0;padding:0;}.tab{ width:240px; margin:50px;

/*border:1px solid;*/

} 
.tab_menu{
 clear:both;
}
.tab_menu li{
 float:left; //Flotte la tête de navigation vers la gauche
 text-align : center; //Flottez la tête de navigation vers la gauche Centrez le texte 
 list-style:none; //Supprimez les symboles de marque
 background:#F1F1F1; //Définissez la couleur d'arrière-plan par défaut
 border:1px solid #898989 ; //Définissez la couleur de la bordure
 margin- right:4px; //La distance entre chaque li est de 4px
 curseur:pointeur; //Une fois la souris survolée, une petite marque de main apparaîtra
 padding :1px 6px; //Contrôler la distance interne de li
 border-bottom:none 

}
.tab_menu li.hover{
 background:#DFDFDF;
}
.tab_menu li.selected{//est sélectionné Option pour ajouter un arrière-plan et une couleur 
 color:#FFF 
 background:#6D84B4;
}
.tab_box{
 clear:both ; //Supprimer l'impact de l'effet flottant
 height: 100px; //Définir la hauteur à 100px
 border:1px solid #898989; //Définir le style de bordure du corps du contenu
>
 .hide{//Masquer le contenu div qui doit être masqué
 display:none ;
}


Une fois la mise en page terminée, effectuez l'action jQuery : 




Copier le code

Le code est le suivant :

Le traitement ici est particulièrement intelligent. Il traite le corps de l'option en obtenant l'indice de li. Il utilise intelligemment une correspondance cachée, qui est la valeur d'index.

De cette façon, même si l'en-tête de l'option et le contenu du corps de l'option ne correspondent pas, l'effet de liaison peut toujours être obtenu.

Grâce à cet exercice, je sens qu'il vaut mieux utiliser mon cerveau pour y réfléchir en premier. Ce n'est qu'en découvrant les différences de pensée que nous pourrons découvrir les lacunes et connaître les lacunes. Parfois, vos idées seront encore meilleures !

Étiquettes associées：

jquery 选项卡

source：php.cn

Article précédent：Comment définir qu'une demande ne soit envoyée qu'une seule fois au cours d'une certaine période_javascript skills Article suivant：Plusieurs bonnes façons de définir des fonctions dans les compétences js function_javascript

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

Derniers articles par auteur