suchen

Heim >Web-Frontend >HTML-Tutorial >Mehrere Implementierungsmethoden der Tab-Leiste in HTML

Mehrere Implementierungsmethoden der Tab-Leiste in HTML

小云云
小云云Original
2017-12-11 11:33:354040Durchsuche

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">


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

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

    5. a

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

    6. a

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

    7. 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
2.


3. Vorlagencode:

1. Hintergrundfarbe hinzufügen, wenn Sie mit der Maus darüber fahren

CSS-Code

Inhalt in die Zwischenablage kopieren

.service-tabs li a{Breite:

160px

;
Höhe

:

80px
;

Anzeige

:Block;Farbe :

#666

;
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

    ;
    3. Farbe
  3. :

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

    :
    4. 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;

border-bottom

:
2px

    solid

  1. #2CC185; Farbe:#2CC185

    ;}

  2. 4. Skriptimplementierung

    JavaScript-Code
Kopieren Sie den Inhalt in die Zwischenablage


$(

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

).click(

>function
() { $(

this

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


Es ist einfach und sehr praktisch. Beeilen Sie sich und machen Sie sich die Hände schmutzig.
  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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Beispiele zur Einführung in die HTML-TextformatierungNächster Artikel：Beispiele zur Einführung in die HTML-Textformatierung

In Verbindung stehende Artikel

Mehr sehen