MVC Styling der Registerkarten

Question

Hier werden die Registerkarten in der Masterseite sind:

<nav> 
    <ul id="menu"> 
     <li><%: Html.ActionLink("Home", "Index", "Home")%></li> 
     <li><%: Html.ActionLink("About", "About", "Home")%></li> 
    </ul> 
</nav> 

Und hier ist die CSS:

ul#menu li.selected a { 
    background-color: #a6e2a6; 
    color: #000; 
} 

Aber egal, was ich in den Hintergrund-Farbe zu tun, es bleibt immer das Gleiche. Wie ändere ich die Hintergrundfarbe und die Höhe der ausgewählten Registerkarte?

Answer 1

Der Selektor :active formatiert nicht den Link, der der aktuellen Seite entspricht, formatiert aber den Link, auf den der Benutzer gerade klickt.

Der Selektor :active ist dem Selektor :hover sehr ähnlich, der die Verknüpfung formatiert, wenn der Benutzer darüber schwebt. Sie sind beide Selektoren, die auf Mausaktionen reagieren.

Hier ist eine Probe, die das Verhalten ziemlich offensichtlich zeigt:

Wie @ o.v: http://jsfiddle.net/NuExP/

bearbeiten, nachdem Sie die Frage geändert. Da es keine Auswahl für die aktuelle aktive Seite gibt, ist seine Lösung, der Verknüpfung eine Klasse hinzuzufügen, um anzuzeigen, dass es sich um die aktuelle aktive Seite handelt, korrekt.

Answer 2

Ich gehe davon aus, dass Sie versuchen, das Design einer aktuell ausgewählten Registerkarte zu ändern? Wenn ja, sollten Sie eine CSS-Klasse wie .current serverseitig zu einer der Registerkarten hinzufügen (auch müssen Sie möglicherweise li-Element anstelle der Verknüpfung darin style - aber es hängt alles von der aktuellen CSS-Struktur)

:active Pseudo-Klasse wird für a different purpose verwendet, Sie könnten sehen, wenn Sie beispielsweise auf den Anker klicken und halten.