jquery AddClass Styling funktioniert nicht, falsch Wähler?

Question

<li id="leistungen"><a href="#Leistungen" onclick="sitemapChangeSubMenu('leistungen','leistungencontent','leistungen'); return false;">LEISTUNGEN</a> </li>

Dies ist das Liste-Element, das ich stylen will mit:

$("#leistungen a").addClass("brown");

Das ist für nicht funktioniert entweder:

$("#leistungen").addClass("brown");

mein CSS-Code ist nur

.brown {
   color:brown;
}

Ich weiß nicht, was falsch ist, hoffentlich können Sie mir helfen:)

Vielen Dank!

Answer 1

Sagen

$("#leistungen").addClass("brown");

wird auf dem gesamten Text innerhalb #leistungen arbeiten, aber nicht auf Anker-Tags. Anker hat einen Standardstil, die überschrieben werden müssen. Sie sind richtig in schriftlicher Form

$("#leistungen a").addClass("brown");

Sie einen Test, um sicherzustellen, Ihr Javascript ausgeführt wird, indem sie es auf sich ändernde

$("#leistungen a").hide();

Wenn es verschwindet, dann wissen Sie, dass Ihre Javascript auf dem richtigen Element arbeitet. Als nächstes versucht spezifischere mit Ihrem Wähler zu sein (vielleicht noch etwas anderes, um die Änderung überschreibt).

$("li#leistungen a").addClass("brown");

Wenn das nicht funktioniert, stellen Sie sicher, dass das Javascript ausgeführt hat und dann das Element untersuchen. Ist es die neue Klasse haben? Wenn ja, dann ist das Problem mit dem CSS eher als die Javascript. Überprüfen Sie Ihre CSS-Datei die „.brown“ -Stil Umgebung auf Syntaxfehler zu suchen. Eine fehlende} aus dem vorherigen Stil würde es tun.

Versuchen Sie „# 4C3F12“ anstelle des Wortes „braun“ als Farbe.

.brown {
  color: #4C3F12;
}

Lassen Sie mich wissen, ob eine dieser Hilfe!

Answer 2

Case-Empfindlichkeit -. Sie benannte Ihren Anker mit einem Großbuchstaben L

$("#Leistungen").addClass("brown");

Im ersten Fall, auch, müssen Sie eine Klassenauswahl verwenden, keine ID-Selektor

$(".leistungen a").addClass("brown");

Hinweis - ich würde vermeiden Klassen und IDs, die (mit oder ohne Groß- und Kleinschreibung) übereinstimmen

.

ID Attribut docs (Hervorhebung von mir):

  

Attribut Das ID eindeutig identifiziert   ein Element innerhalb eines Dokuments. keine zwei   Elemente können den gleichen ID-Wert in   ein einziges Dokument. Das Attribut des   Wert muss mit einem Buchstaben in der beginnen   A-Z oder A-Z-Bereich und kann gefolgt werden,   mit Buchstaben (A-Za-z), Ziffern (0-9),   Bindestriche ( "-"), Unterstreichungen ( "_"),   Doppelpunkte ( ":") und Punkte ( ""). Die   Wert wird zwischen Groß- und Kleinschreibung unterschieden.

Answer 3

Sie haben Firebug installiert? In firebug müssen Sie prüfen, ob die Klasse hinzugefügt wird oder nicht. Wenn es hinzugefügt wird, dann aktualisieren Sie Ihren Browser-Cache, sonst Ihr Javascript überprüfen.

Answer 4

Sie könnten ein Problem haben mit CSS Spezifität hier. Wenn die ursprüngliche Farbe Ihres ‚einen‘ Tag sehr spezifisch angegeben ist, könnte die neue Definition nicht. Zum Beispiel:

body #leistungen a {
   color: red;
}

.brown {
   color: brown;
}

In diesem Fall wird die rote Farbe hat Vorrang vor der braunen Farbe, weil die erste Definition spezifischer als die letzten ist. Versuchen Sie definieren die braune Klasse genauer gesagt:

body #leistungen a.brown {
   color: brown;
}

Answer 5

Es könnte sein, dass Sie eine widersprüchliche CSS-Definition irgendwo haben. Wenn Sie sicher sind, dass das Javascript ausgeführt wird, dann dies überprüfen:

1. Da es eine ID ist, stellen Sie sicher, dass die ID nicht so gut auf einen anderen Tag zugeordnet ist.
2. Haben Sie weitere CSS-Deklarationen haben, die auf einem Tags gilt?

Versuchen Sie, die Erklärung zu ändern:

a.brown{ color: brown;} 

oder     .brown eine {color: braun;}

Je nachdem, ob Sie verwenden $("#leistungen a").addClass("brown"); oder $("#leistungen").addClass("brown");