Plusieurs méthodes d'implémentation de barre d'onglets en HTML-tutoriel HTML-php.cn

Il existe de nombreuses utilisations des balises en HTML. Cet article recommande plusieurs méthodes d'implémentation pour la barre de balises. Il est très utile pour apprendre la connaissance des balises.

Page à onglets : Catégorie + Description

Barre d'onglets : Catégorie=> Permettre aux utilisateurs de comprendre où ils se trouvent et où ils vont

1. Méthode de nommage CSS :

Code XML/HTML Copier le contenu dans le presse-papier

<p classe ="service-tabs service-tabs1">
　<ul class="service-tabs-inner">
　🎜><a href="#nogo">Suivez a>li>　<li><
href= "#nogo">Recommandéa>li>　<li ><
href="#nogo">Navigation a>li>　<li><
href= "#nogo">Shoppinga>li>　ul>
p
>
Onglet : onglet
- 1) float : effacer le débordement du flotteur : caché ;/pseudo-class :after/
  2) display : inline- le bloc IE7 n'est pas compatible : *display:inline;* zoom:1; Espacement des espaces : font-size:0;/same line/negative margin/letter-spacing

3. Code du modèle :

1. Ajouter une couleur d'arrière-plan au survol

Code CSS

Copier le contenu dans le presse-papiers

.service-tabs li a{ largeur:

160px

;
hauteur

80px
;

affichage

:bloc;couleur :

#666

;
font-size

;}
.service-tabs1 li a:hover{color:#2CC185;}
.service -tabs1 li.on a{couleur-de-fond:#2CC185;couleur:#fff;} /*Fond Couleur*/

2. Petit triangle, Évident

Code CSSCopier le contenu dans le presse-papiers

.service-tabs4 li{position:relative;}
.service-tabs4 li a:hover{ couleur:#2CC185;} 🎜>#2CC185
;
:
#fff;} 🎜>:11px ;hauteur:7px;position
:
;
bas bas :-6px;gauche:76px;arrière-plan:url(images /arrow.png);affichage:aucun;} >:bloquer;} 3. Souligner
Code CSSCopier le contenu dans le presse-papiers

.service-tabs2 li a:hover{color

#2CC185

;}

.service-tabs2 li.sur une{hauteur:78px;

bordure-bas

:
2px

#2CC185;couleur:#2CC185
;}
4. Implémentation du script
Code JavaScript

Copiez le contenu dans le presse-papiers

fonction(){ $(". service-tabs ul li"

).click(

>function
() { $(

this

).addClass("on").siblings( ).removeClass("on"); } })

C'est simple et très pratique. Dépêchez-vous de mettre la main à la pâte.

Recommandations associées :
Utilisation de la balise html imgComment utiliser les nouvelles balises HTML5 Balises de marquage de format HTML couramment utilisées

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：

html 实现方法

source：php.cn

Article précédent：Exemples pour introduire la connaissance du formatage du texte HTML Article suivant：Analyse sur la position de placement du script en HTML

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