El estilo de jquery addclass no funciona, ¿selector incorrecto?

Question

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

Este es el elemento de la lista con el que quiero diseñar:

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

Esto tampoco funciona para:

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

mi código CSS es solo

.brown {
   color:brown;
}

No sé qué está mal, espero que me puedan ayudar :)

muchas gracias

Answer 1

Diciendo

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

funcionará en todo el texto dentro de #leistungen, pero no en las etiquetas de anclaje. Las anclas tienen un estilo predeterminado que debe ser anulado. Tienes razón al escribir

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

Haga una prueba para asegurarse de que su Javascript se esté ejecutando cambiándolo a

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

Si desaparece, sabrá que su Javascript está funcionando en el elemento correcto. A continuación, intente ser más específico con su selector (quizás algo más anule su cambio).

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

Si eso no funciona, asegúrese de que se haya ejecutado JavaScript y luego inspeccione el elemento. ¿Tiene la nueva clase? Si es así, entonces el problema es con el CSS en lugar del Javascript. Verifique su archivo CSS que rodea el & Quot; .brown & Quot; estilo para buscar errores de sintaxis. Un faltante} del estilo anterior lo haría.

Intente usar " # 4C3F12 " en lugar de la palabra " marrón " como un color.

.brown {
  color: #4C3F12;
}

¡Avíseme si alguno de estos ayuda!

Answer 2

Mayúsculas y minúsculas: nombró su ancla con una L mayúscula

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

En el primer caso, también, necesitaría usar un selector de clase, no un selector de identificación

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

Nota: evitaría clases e identificadores que coincidan (con o sin mayúsculas y minúsculas).

HTML ID de atributo documentos (énfasis mío):

  

El atributo ID identifica de forma exclusiva   Un elemento dentro de un documento. No dos   los elementos pueden tener el mismo valor de ID en   Un solo documento. El atributo   el valor debe comenzar con una letra en el   rango A-Z o a-z y puede seguirse   por letras (A-Za-z), dígitos (0-9),   guiones (" - "), guiones bajos (" _ "),   dos puntos (": ") y puntos (". "). El   el valor distingue entre mayúsculas y minúsculas.

Answer 3

¿Tienes instalado Firebug? En firebug deberás comprobar si la clase se está agregando o no. Si se está agregando, actualice la memoria caché de su navegador, de lo contrario verifique su javascript.

Answer 4

Es posible que tenga un problema con Especificidad de CSS aquí. Si el color original de su etiqueta 'a' se especifica de manera muy específica, la nueva definición podría no funcionar. Por ejemplo:

body #leistungen a {
   color: red;
}

.brown {
   color: brown;
}

En este caso, el color rojo tiene precedencia sobre el color marrón, porque la primera definición es más específica que la última. Intente definir la clase marrón más específicamente:

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

Answer 5

Puede ser que tenga una definición de CSS en conflicto en alguna parte. Si está seguro de que se está ejecutando JavaScript, compruebe esto:

1. Dado que es una ID, asegúrese de que esa ID tampoco esté asignada a otra etiqueta.
2. ¿Tiene alguna otra declaración CSS que se aplique a las etiquetas?

Intente cambiar la declaración a:

a.brown{ color: brown;} 

O     .brown a {color: brown;}

Dependiendo de si usa $("#leistungen a").addClass("brown"); o $("#leistungen").addClass("brown");