Li-Element bleibt beim Klicken nicht ausgewählt

8

Ich habe ein li -Element mit Html.ActionLink erstellt, das letztendlich als Anker-Tag rendert. Ich habe CSS für Hover angewendet und es funktioniert einwandfrei.

Jetzt muss ich die li Box markieren, wenn ich darauf klicke. Ich habe jQuery verwendet, aber das scheint nicht zu funktionieren. Ich habe die Debugger-Tools überprüft und es scheint keine Fehler zu geben. Ich denke also, dass die Klasse nicht angewendet wird. Ich bin mir nicht sicher, was das Problem ist. Bitte sehen Sie meinen Code unten.

%Vor% %Vor% %Vor%
    
Tom 06.03.2017, 16:15
quelle

8 Antworten

6

  1. Sie sollten über CSS Specificity lesen: Ihre .highlightMenu {} Auswahl wird nie angewendet, weil .#navcontainer ul li {} selector spezifischer ist. Bevorzugen Sie Klassenselektoren , lesen Sie BEM-Methodik .

  2. Aus MDN über !important :

      

    Die Verwendung von !important ist jedoch schlechte Praxis und sollte vermieden werden, da es das Debuggen schwieriger macht, indem Sie das natürliche Cascading in Ihren Stylesheets. Wenn zwei widersprüchliche Deklarationen mit der !important -Regel auf dasselbe Element angewendet werden, wird die Deklaration mit einer größeren Spezifität angewendet.

  3. Wenn Sie .highlightMenu class auf <li> setzen möchten, wenn Sie auf <a> klicken, können Sie jQuery verwenden. engster () dafür.

  4. Wenn Sie Listenelemente dynamisch hinzufügen, können Sie Event Delegation verwenden.

Ich habe Ihren Code bereinigt und ihn im BEM-Stil mit den Korrekturen neu geschrieben.

%Vor% %Vor% %Vor%
    
Sergey Denisov 08.03.2017 22:13
quelle
2

Ich habe ein bisschen dein CSS und dein Skript geändert. Jetzt wird die neue Klasse den Elementen korrekt hinzugefügt.

Bitte schauen Sie sich Ссылка

an

Alles Gute.

    
Daniele De Matteo 06.03.2017 16:48
quelle
2

Was Sie falsch machen, ist das Targeting auf den Hyperlink, während Sie nur das Listenelement hervorheben müssen.

Aber jetzt, wenn Sie Ihren Code so korrigieren, dass er das Listenelement in der Liste anstelle der Hyperlinks anvisiert, werden Sie keine Änderungen auf dem Bildschirm sehen können. (Sie könnten natürlich die Klassen sehen, die in den Entwicklertools des Browsers umgeschaltet werden).

Warum? Da der Hyperlink innerhalb des Listenelements alle Änderungen enthält, die angezeigt werden sollen, wenn auf das Listenelement geklickt wird.

Ich habe der .highlightMenu eine weitere CSS-Eigenschaft hinzugefügt, damit Sie die Änderungen bemerken.

Sieh dich selbst:

  • JavaScript wird so geändert, dass es auf Listenelemente und nicht auf Hyperlinks innerhalb der ul in #navcontainer abzielt.
  • .highlightMenu enthält jetzt eine zusätzliche CSS-Eigenschaft (Gliederung), um die Stiländerungen beim Klickereignis zu erkennen.

%Vor% %Vor% %Vor%

Ich hoffe, es hat geholfen.

    
Rahul Arora 14.03.2017 11:22
quelle
1

Für einen schnellen und einfachen Hack, mit dem Elemente beim Klicken reagieren können, aber kein Skripting erforderlich ist:

  • fügen Sie dem Element
    • das Attribut tabindex="0" hinzu
  • Wenden Sie Stile auf das Element an, indem Sie die Pseudo-Klasse :focus
    • verwenden

Arbeitsbeispiel:

%Vor% %Vor%
    
Rounin 07.03.2017 16:55
quelle
1

Der Grund, warum Ihr Code möglicherweise nicht funktioniert, ist diese Zeile

%Vor%

Sie haben den Anker "a" in den Selektor eingefügt, obwohl Sie das "li" -Tag markieren möchten. Es sollte eher so sein:

%Vor%

Ich habe dies auf fiddle.jshell überprüft und es scheint das Problem zu beheben.

    
Louis Amon 08.03.2017 23:20
quelle
1
%Vor%     
Kiran Raj R 14.03.2017 07:49
quelle
1

Dein Code ist korrekt ... Du musst nur deine .css ein wenig ändern.

Altes CSS: -

%Vor%

Geändert zu: -

%Vor%

Sehen Sie sich den Screenshot an

%Vor% %Vor% %Vor%
    
prog1011 14.03.2017 08:58
quelle
1

Ich habe einige Änderungen an css und jquery vorgenommen

%Vor% %Vor% %Vor%
    
vijay 15.03.2017 07:08
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Isolieren Sie alphabetische Zeichenfolgen innerhalb einer größeren Zeichenfolge