2008-12-31 1 views
5

Ich habe eine kleine Tabbed Navigation Setup mit CSS. Wenn man über die Tabs schwebt, ändert sich die Farbe, großartig. Wenn ich jedoch auf einen Tab klicke und auf die entsprechende Seite navigiere, möchte ich, dass der Tab (der aktive Tab?) Hervorgehoben bleibt und die aktuelle Seite anzeigt.Hervorhebung einer aktiven Registerkarte - CSS

Ich mache dies derzeit mit einer Klasse (.currenttab) und dann diese Klasse in jeder HTML-Datei verwenden. Ich bin nicht mit:

active 

Gibt es eine Möglichkeit für mich, aktiv zu verwenden, anstatt eine Klasse in jeder einzelnen HTML-Datei verwenden, oder ist das, was ich tue richtig?

Vielen Dank im Voraus.

+0

Ihre Frage doesn Wenn Sie das nicht tun, stellen Sie sicher, dass Sie alle CSS-Klassen in eine separate .css-Datei einfügen und diese dann in jede Ihrer HTML-Seiten einfügen, damit Sie die Klassen nicht neu definieren. – RSlaughter

+0

Entschuldigung, ich verstehe nicht ganz, was Sie meinen. Ich habe derzeit ein Stylesheet für alles, einschließlich der Klasse .currenttab. In jeder HTML-Datei habe ich dann die Klasse dem entsprechenden Listenelement (Navigationselement) zugeordnet. Ist das falsch? – Ronnie

Antwort

6

Was Sie tun, ist korrekt. Der Pseudo-Selektor :active bedeutet etwas anderes - das Ereignis der Aktivierung eines Steuerelements (dh die Zeit zwischen einem Benutzer drückt die Maustaste und gibt es frei).

Verwenden Sie eine Klasse, um das ausgewählte Element anzugeben, ist der Weg zu gehen.

+0

Vielen Dank für die schnelle Antwort. – Ronnie

3

Es ist alles andere als ideal, aber wenn Sie jeder Seite und jedem Tab eine ID geben, können Sie die Hervorhebung in CSS anstelle von HTML definieren. Ich lief über eine vollständige Erklärung, während das aktive Attribut aufzublicken:

Highlighting Current Page With CSS

A site I designed with this technique (Seiten, nicht Tabs)

+1

Keine Notwendigkeit, mit den IDs wirklich schwer zu werden, Klassen werden ausreichen, aber dieser Ansatz wird Ihnen den größten Knall für Ihr Geld bringen. Wenn Sie anfangen, in Richtung fortgeschrittener HTML/CSS zu gehen, wird das Hinzufügen von Klassen zum Body-Tag eine viel bessere Übung sein. –

1

Hier sind einige weitere Beispiele brainjar Demo
Mehr von Brainjar

+0

Ist die Brainjar-Demo mit einer .current-Klasse im HTML-Code oder mit der von Justin oben beschriebenen Methode? – Ronnie

+0

Ich denke, es verwendet die .active .visited, wie es in der Quelle aussieht –

Verwandte Themen