recherche

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

Implémentation simple de jQuery tab_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBoriginal
2016-05-16 16:57:56842parcourir

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 !

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：Comment définir qu'une demande ne soit envoyée qu'une seule fois au cours d'une certaine période_javascript skillsArticle suivant：Comment définir qu'une demande ne soit envoyée qu'une seule fois au cours d'une certaine période_javascript skills

Articles Liés

Voir plus