Mehrere Implementierungsmethoden der Tab-Leiste in HTML

Es gibt viele Verwendungsmöglichkeiten für Tags in HTML. Ich hoffe, dass es jedem helfen kann, die Tag-Leiste zu implementieren.

Tab-Seite: Kategorie + Beschreibung

Tab-Leiste: Kategorie=>Lassen Sie Benutzer verstehen, wo sie sich befinden und wohin sie gehen

1. CSS-Benennungsmethode:

XML/HTML-Code Inhalt in die Zwischenablage kopieren

1. <p Klasse ="service-tabs service-tabs1">

2. 
   

3. 　<ul class="service-tabs-inner">

4. 　🎜><a href="#nogo">Folgen a>li>　<li><

a

5. href= "#nogo">Empfohlena>li>　<li ><

a

6. href="#nogo">Navigation a>li>　<li><

a

7. href= "#nogo">Einkaufena>li>　ul>

8. p
9. >

   
   

11. Tab: tab < ul>

12. 
    1) float: float overflow:hidden;/pseudo-class:after/
    2) display:inline- Block IE7 ist nicht kompatibel: *display:inline;* zoom:1; Leerzeichenabstand: Schriftgröße:0;/gleiche Zeile/Rand negativer Wert/Buchstabenabstand

3. Vorlagencode:

CSS-Code

Inhalt in die Zwischenablage kopieren

.service-tabs li a{Breite:

;
Höhe

80px
;

:Block;Farbe :

;
Schriftgröße

32px
1. ;} 

2. .service-tabs1 li a:hover{color:#2CC185;} 

3. .service -tabs1 li.on a{Hintergrundfarbe:#2CC185;Farbe:#fff;} /*Hintergrund Farbe*/

2. Kleines Dreieck, Offensichtlich

CSS-CodeInhalt in die Zwischenablage kopieren

1. .service-tabs4 li{position:relative;}

2. .service-tabs4 li a:hover{ Farbe:#2CC185;} 🎜>#2CC185

   ;
Farbe
3. :

   #fff;} 🎜>:11px ;Höhe:7px;Position

   :
absolut
4. ;

   unten unten :-6px;links:76px;Hintergrund:URL(images /arrow.png);anzeige:keine;} >:blockieren;} 3. Unterstreichen Sie

5. CSS-CodeInhalt in die Zwischenablage kopieren

.service-tabs2 li a:hover{color

#2CC185

.service-tabs2 li.on a{height:78px;

:
2px

solid

1. #2CC185; Farbe:#2CC185

   ;}

2. 4. Skriptimplementierung

   JavaScript-Code

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

>function
() { $(

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

1. Verwandte Empfehlungen:

   Verwendung des HTML-IMG-TagsSo verwenden Sie neue HTML5-Tags Häufig verwendete HTML-Formatierungs-Tags

Das obige ist der detaillierte Inhalt vonMehrere Implementierungsmethoden der Tab-Leiste in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!