Mehrere Implementierungsmethoden der Tab-Leiste (empfohlen)

Mehrere Implementierungsmethoden der Tab-Leiste (empfohlen)

Registerkarten: Kategorie + Beschreibung

Tag-Leiste: Kategorie => Lassen Sie die Benutzer wissen, wo sie sind und wohin sie gehen

1. CSS-Benennungsmethode:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. < div   Klasse = "Service-Tabs Service-Tabs1" >   
  2.   
  3. 　　< ul   Klasse = "service-tabs-inner" >   
  4. 　　　　<   Klasse = "ein" > < ein   href = " #nogo " > Folgen </a> </li>   
  5. 　　　　< li > < ein   href = "#nogo" > Empfehlung </ a > </ li >     
  6. 　　　　< li > < ein   href = "#nogo" > Navigation </ a > </ li >     
  7. 　　　　< li > < ein   href = "#nogo" > Einkaufen </ a > </ li >     
  8. 　　</ ul >   
  9.   
  10. </div>​​   
  11.   

Tab: Registerkarte

Vorteile: 1. Leicht zu finden 2. Erfüllt SEO-Standards

2. Layout:

1.<ul><li> </div>
1) Float: Float-Überlauf löschen: versteckt; /Pseudoklasse: nach/
2) display:inline-block IE7 ist nicht kompatibel: *display:inline;*zoom:1; Leerzeichen: font-size:0;/gleiche Zeile/negativer Rand/Buchstabenabstand

2.<Tabelle>

3. Vorlagencode:

1. Bewegen Sie den Mauszeiger und fügen Sie eine Hintergrundfarbe hinzu

CSS- CodeInhalt in die Zwischenablage kopieren
  1. .service-tabs li a { Breite : 160px ; Höhe : 80px ; Anzeige : Block ; Farbe : #666 ; Schriftgröße : 32px ;}
  2. .service-tabs1 li a:hover{ Farbe : #2CC185 ;}
  3. .service-tabs1 li.on a{ background-color : #2CC185 ; color : #fff ;} /*Hintergrundfarbe*/   

2. Kleines Dreieck, offensichtlich

CSS- CodeInhalt in die Zwischenablage kopieren
  1. .service-tabs4 li{ position : relative ;}
  2. .service-tabs4 li a:hover{ Farbe : #2CC185 ;}
  3. .service-tabs4 li.on a{ Hintergrundfarbe : #2CC185 ; Farbe : #fff ;}
  4. .service-tabs4 li i{ Breite : 11px ; Höhe : 7px ; Position : absolut ; unten : - 6px ; links : 76px ; Hintergrund : URL (Bilder/Pfeil.png); Anzeige : keine ;}
  5. .service-tabs4 li.on i{ Anzeige : Block ;}

3. Unterstreichungsmarkierung

CSS- CodeInhalt in die Zwischenablage kopieren
  1. .service-tabs2 li a:hover{ Farbe : #2CC185 ;}
  2. .service-tabs2 li.on a{ Höhe : 78px ; Rahmen unten : 2px   solide   #2CC185 ; Farbe : #2CC185 ;}

4. Skriptimplementierung

JavaScript CodeInhalt in die Zwischenablage kopieren
  1. $( Funktion () { $( ".service-tabs ul li" ).click( Funktion () { $( diese ).addClass( "auf" ).siblings().removeClass( "auf" ); }); })
  2.   

Einfach + Praktisch

Die oben aufgeführten Implementierungsmethoden der Registerkartenleiste (empfohlen) sind alle Inhalte, die der Editor mit Ihnen teilt. Ich hoffe, sie können Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen.

<<:  Slot-Anordnung und Nutzungsanalyse in Vue

>>:  So versuchen Sie, Ihrem CSS einen Sticky-Effekt hinzuzufügen

Artikel empfehlen

So lösen Sie das Problem, dass absolut positionierte Elemente in IE6/7 auf mysteriöse Weise verschwinden oder blockiert werden

1. Wenn die Breite der angrenzenden schwebenden Eb...

Verhindern Sie, dass HTML- und JSP-Seiten zwischengespeichert und erneut vom Webserver abgerufen werden.

Wenn der Benutzer sich abgemeldet hat und im Brows...

So konfigurieren Sie den virtuellen Nginx-Host in CentOS 7.3

Experimentelle Umgebung Eine minimal installierte...

Tutorial zur Installation der PyTorch-Entwicklungsumgebung unter Windows

Anaconda-Installation Anaconda ist ein Softwarepa...

Lösen Sie das Problem des Mac Docker x509-Zertifikats

Frage Kürzlich musste ich mich bei einem privaten...

Notieren Sie die Schritte zur Verwendung des MQTT-Servers, um eine sofortige Kommunikation in Vue zu realisieren

MQTT-Protokoll MQTT (Message Queuing Telemetry Tr...

Beispiel für die Konvertierung von Spark RDD in einen Dataframe und das Schreiben in MySQL

Dataframe ist eine neue API, die in Spark 1.3.0 e...

Ausführliche Erläuterung der Vue-Komponente „Multi-Select-Liste“

Eine Mehrfachauswahl ist ein Benutzeroberflächene...

Lösung für die MySQL-Installationsaufforderung „Geben Sie für weitere Hilfe bitte NET HELPMSG 3534 ein“

Bei der heutigen Installation von MySQL erscheint...

Detaillierter Ablauf des Zabbix-Überwachungsprozesses und des Port-Through-Agenten

Umgebungseinführung Betriebssystem: Centos 7.4 Za...

Ein kurzer Vortrag über Responsive Design

1. Was ist Responsive Design? Responsive Design b...

CSS erzielt den „Bottom Absorption“-Effekt im Footer

Wir stoßen häufig auf dieses Problem: Wie kann ma...

Teilen Sie einige wichtige Interviewfragen zum MySQL-Index

Vorwort Ein Index ist eine Datenstruktur, die ein...

Vue implementiert eine Wettervorhersagefunktion

In diesem Artikel wird der spezifische Code von V...

So implementieren Sie Code und Schritte für den digitalen Paging-Effekt in CSS

Eine beträchtliche Anzahl von Websites verwendet d...