Jquery li onclick-Klasse hinzufügen

Ich habe ein Menü in meinem master-Seite.

 <ul>
    <li><a href="."><span>Home</span></a></li>
    <li><a href="contactus.aspx"><span>contact us</span></a></li>
 </ul>

wenn ich auf den Menüpunkt, den ich einstellen will css-Klasse mit Hilfe von jquery

 $(function () {

            $("li:first-child").addClass("test");
            $('li').click(function () {
                $(this).addClass('test');

            });
        });

css 

 .test {background-color:Red;}

beim Klick auf das Menü, es zeigt die hintergrund-Farbe, aber dann verschwindet es. wie mache ich es bleiben solange aktiv, bis ein anderes Menü geklickt wird?

danke

  • Getestet habe ich es im FF, Chrome und IE7,8. Fein gearbeitet. jsfiddle.net/9qgzk
  • Haben Sie irgendwelche anderen code bewirken diese Liste posten?
  • Nicht den "Kontakt" - link navigieren Sie zu einer anderen Seite? Sie müssten, um den hintergrund wieder auf die andere Seite.
InformationsquelleAutor Benk | 2012-08-13
  1. 3

    UPDATE2: das ist kein javascript-problem

    <li><a href="#"><span <%=ServerSizeLogic.SelectedMenu("Home")%>>Home</span></a></li>

    Dies ist eine böse Vermutung auf, wie der server-Seite könnte für Sie, abhängig von Ihrer server-side-Technologie. ServerSizeLogic.SelectedMenu("Home") oder was auch immer Sie verwenden, entweder eine leere Zeichenfolge zurückgeben oder "class='test'". Nur stellen Sie sicher, dass nur eine von li Elementen wird der Stil und das entfernen der client-seitige code

    //don't do it like this but hopefully you get the gist
ServerSizeLogic::SelectedMenu(string item){
    if (item == CurrentPage)
      return "class='test'";
    return "";
}

    UPDATE: offensichtlich, sobald Sie navigieren Weg von der Seite das gewünschte element ausgewählt werden, muss von dem server (es sei denn, Sie sind mit ajax), in dem cast einfach loszuwerden, die li:first-child und stellen Sie die Klasse direkt in Ihrem anzeigen-code auf der aktuellen li element

    Original:
    Wie über diese kleine fiddle http://jsfiddle.net/LmUrP/

     $(function () {

        $("li:first-child").addClass("test");
        $('li').click(function () {
            $('#menu li').removeClass('test');
            $(this).addClass('test');
        });
    });​

    html

    <ul id='menu'>
  <li><a href="#"><span>Home</span></a></li>
  <li><a href="#"><span>contact us</span></a></li>
  <li><a href="#"><span>apples</span></a></li>
  <li><a href="#"><span>bananas</span></a></li>
</ul>​
    • Sie setzen href='#' basierend auf was? Sie wissen, dass die Seite neu laden mit dem original html.
    • ja, die # war für die Geige, die ich bemerkte nach der Veröffentlichung, dass das eigentliche problem wurde nicht verwandten, es sei denn, die OP wurde unter Verwendung von ajax, aktualisierte Antwort entsprechend kurz bevor ich Sie sah, Sie Kommentar.
    • da sagte er it shows the background color but then it disappears. und das ist, weil die Seite "neu geladen"
    • vielen Dank an alle für Eure Hilfe, also ich Entferne li:first-child, wie ich so auf Seite neu laden, der hintergrund ist immer noch auf? alle von meinem code in die master-Seite, muss ich hinzufügen, die jquery in jeder aspx-Seite als auch?
    • post aktualisiert, wählen Sie einen li-element, über den repeater, server-side control, mvc-Ansicht oder was auch immer und fügen Sie die test-Klasse in der master-Seite basieren entweder auf der Seite der Benutzer oder eine andere server-side-state. kein jQuery erforderlich.
    InformationsquelleAutor Adam Straughan
  2. 1

    So werden Sie in der Lage, markieren Sie die "current list-item" basiert auf der aktuellen Seite url

    Haben Sie zum testen auf die url laden:

    $(function () {
    $('ul#menu>li>a[href="'+location.pathname+'"]').addClass('test');      
});​

    haben Sie Ihr html so:

    <ul id="menu">
    <li><a href="/"><span>Home</span></a></li>
    <li><a href="/contactus.aspx"><span>contact us</span></a></li>
</ul>

    beachten Sie die / am Anfang des href-Attribut Wert!
    das ist, weil location.pathname gibt immer einen absoluten Pfad.

    hier ist ein Turnschuh http://jsfiddle.net/unloco/29E23/

    ich schrieb href="/_display/" denn das ist die url der jsfiddle-display iframe !

    ABER wenn Ihre Seite in http://domain.com/folder/page.php haben Sie zu schreiben href='/folder/page.php' zu haben, das richtige Verhalten!

    • Nicht hinzufügen / an das href-Verknüpfungen angesichts der Tatsache, dass es war ein relativer link?
    • ja, das ist das Problem hier! aber setzen /folder/page.php beheben wird es Ihnen Danken
    InformationsquelleAutor UnLoCo
Schreibe einen Kommentar