Wie CSS-Klasse auf ein HTML-Element mit jQuery in ASP .NET MVC anwenden?

Question

Ich versuche, ein Tab-Menü wie das in Stack Overflow zu implementieren. Ich habe eine HTML-Liste erstellt und formatiert, damit sie wie Tab-Menüs mit CSS aussieht. Ich habe die HTML-Liste auf die Masterseite gelegt. Wie ändern Sie nun die Farbe der Liste, nachdem sie vom Benutzer angeklickt wurde?

Wenn Sie beispielsweise auf die Registerkarte "Benutzer" im Menü "Stapelüberlauf" klicken, werden Sie zur Indexansicht "Benutzer" weitergeleitet und ändern dann die Farbe des Registerkartenmenüs in orange. Wie erreiche ich das?

Answer 1

Sie nicht und sollten nicht Jquery dafür verwenden. Der Grund dafür ist, dass es keinen klaren Grund gibt, Javascript zu verwenden.

Was brauchen Sie auf Ihrem Master-Seite zu tun, dynamisch die Klasse der aktuellen Seiten-Taste, um so etwas wie festgelegt ist:

<li class="selected">Home</li> 
<li>Users</li> 
... 

Sie können

durch den Zugriff auf die aktuelle URL herauszufinden

Request.Url 

Dann erstellen Sie einfach eine CSS-Klasse, um die Änderung anzuzeigen

Keine Notwendigkeit für Javascript hier. Ich liebe auch JQuery, aber zu oft versuchen Leute Ausreden zu finden, um sie zu benutzen, anstatt eine einfachere Lösung zu benutzen. Denken Sie daran, nicht jeder kann verwenden Javascript

Answer 2

Sie können die follwoing funcitons verwenden, um Klassen hinzufügen/entfernen:

$("#MyElement").addClass(classname); 
$("#MyElement").removeClass([classname]); 
$("#MyElement").toggleClass(classname); 

Sie einen Parameter removeClass passieren kann, oder es leer

http://docs.jquery.com/Attributes/toggleClass

Answer 3

die HTML-Quelle für die oben verlassen Ebene Navigation auf SO sieht so aus, wenn in der Fragen Bereich:

<ul> 
    <li class="youarehere"><a href="/questions">Questions</a></li> 
    <li><a href="/tags">Tags</a></li> 
    <li><a href="/users">Users</a></li> 
    <li><a href="/badges">Badges</a></li> 
    <li><a href="/unanswered">Unanswered</a></li> 
</ul> 

Beachten Sie die youarehere Klasse dem die Fragen Text enthält li Element befestigt ist. Die CSS-Definition hinter dieser Klasse dreht den "Knopf" orange. Die Klasse youarehere (oder die Entsprechung für Ihr Projekt) könnte durch den Server-Code in Ihrer Masterseite hinzugefügt werden oder, wie James Wiseman darauf hingewiesen hat, über jQuery im Browser.

Answer 4

ich nicht so sprechen kann, aber die Art und Weise funktioniert dies in der Regel durch für jede Seite verschiedene HTML-Generierung entlang der Linien von:

<ul class="tabs> 
    <li><a href="/tab1">Tab 1</a></li> 
    <li class="on"><a href="/tab2">Tab 2</a></li> 
    <li><a href="/tab3">Tab 3</a></li> 
</ul> 

Wo class = „on“ steht Ihr unterschiedliches Styling für Ihre ausgewählte Registerkarte. Jetzt wollen Sie nicht wirklich dies für jede Seite tun, damit Sie es in Ihrem Master-Seite wie platzieren können:

<ul class="tabs> 
    <li <%= ViewData["CurrentTab"] == "Tab1" ? "class=\"on\"" : "" %>><a href="/tab1">Tab 1</a></li> 
    <li <%= ViewData["CurrentTab"] == "Tab2" ? "class=\"on\"" : "" %><a href="/tab2">Tab 2</a></li> 
    <li <%= ViewData["CurrentTab"] == "Tab3" ? "class=\"on\"" : "" %>><a href="/tab3">Tab 3</a></li> 
</ul> 

Dann in jedem Ihrer Controller-Aktionen den Wert der Registerkarte setzen Sie gewählt werden wollen wie :

ViewData["CurrentTab"] = "Tab2"; 

Sie für die aktuelle URL in der Master-Seite testen konnte, aber diese Methode bietet ein wenig mehr Flexibilität, wenn mehrere URLs die gleichen Registerkarte markieren sollten.

Ich sehe nicht die Notwendigkeit für die Client-Seite Einstellung, aber wenn Sie JQuery wie James Wiseman zu verwenden, benötigt sagte:

$("#Tab1").addClass('on'); // or 
$("#Tab1").removeClass('on'); // or 
$("#Tab1").toggleClass('on');