jQuery CSS menu ne pas sélectionner le lien actif

Question

Quel est le problème avec ceci et comment pourrais-je le réparer?

J'ai un menu CSS (horizontal) que je veux changer l'arrière-plan et la police quand l'un des éléments est sélectionné. J'ai trouvé un autre article qui m'a donné du code jQuery pour le faire fonctionner, et je pensais que je l'avais bien codé, mais quand je clique sur un élément pour changer sa classe, il ajoute la classe, mais l'arrière-plan et la police restent les mêmes. Des idées ici?

Voici le HTML:

<ul id="menu_nav" class="buttons"> 
    <li> 
    <a href="#" onclick="' . $menu_path . '">Item 1</a> 
    </li> 
    <li> 
    <a href="#" onclick="' . $menu_path . '">Item 2</a> 
    </li> 
    <li> 
    <a href="#" onclick="' . $menu_path . '">Item 3</a> 
    </li> 
</ul> 

Voici le CSS:

ul#menu_nav 
{ 
    float:left; 
    width:790px; 
    padding:0; 
    margin:0; 
    list-style-type:none; 
    background-color:#000099; 
} 
ul#menu_nav a 
{ 
    float:left; 
    text-decoration:none; 
    color:white; 
    background-color:#000099; 
    padding:0.2em 0.6em; 
    border-right:1px solid #CCCCCC; 

    font-family: Tahoma; 
    font-size: 11px; 
    font-style: normal; 
    font-weight: bold; 
    position: relative; 
    height: 21px; 
    line-height:1.85em; 
} 
ul#menu_nav a:hover { 
    background-color:#F1F4FE; 
    color:#000099; 
    border-top:1px solid #CCCCCC; 
} 
ul#menu_nav li {display:inline;} 

.selected { 
    background-color:#F1F4FE; 
    color:#000099; 
    border-top:1px solid #CCCCCC; 
} 

Voici le jQuery:

$(function(){ 
    $(".buttons li>a").click(function(){ 
    $(this).parent().addClass('selected'). // <li> 
     siblings().removeClass('selected'); 
    }); 
}); 

Answer 1

Merci pour les conseils, il m'a aidé moi-même repenser à quelque chose plus basique ... si quelqu'un arrive, voici le code CSS et jquery qui a résolu le problème que j'avais.

Fondamentalement, je viens de créer deux classes et les ai échangées toutes les deux puis j'ai utilisé des sélecteurs jquery pour ajouter/supprimer les classes afin d'obtenir l'effet recherché.

$(function(){ 
       $(".menu_buttons li>a").click(function(){ 
       $(this).addClass('selected').removeClass('button'). // <li> 
        parents().siblings().children("a").removeClass('selected').addClass('button'); 
       }); 
      }); 

La dernière css ressemble à ceci:

ul#menu_nav 
{ 
    float:left; 
    width:790px; 
    padding:0; 
    margin:0; 
    list-style-type:none; 
    background-color:#000099; 
} 
ul#menu_nav a.button 
{ 
    float:left; 
    text-decoration:none; 
    color:white; 
    background-color:#000099; 
    padding:0.2em 0.6em; 
    border-right:1px solid #CCCCCC; 

    font-family: Tahoma; 
    font-size: 11px; 
    font-style: normal; 
    font-weight: bold; 
    position: relative; 
    height: 21px; 
    line-height:1.85em; 
} 
ul#menu_nav a:hover { 
    background-color:#F1F4FE; 
    color:#000099; 
    border-top:1px solid #CCCCCC; 
} 
ul#menu_nav li {display:inline;} 

.selected { 
    background-color:#F1F4FE; 
    color:#000099; 
    border-top:1px solid #CCCCCC; 

    float:left; 
    text-decoration:none; 
    padding:0.2em 0.6em; 
    border-right:1px solid #CCCCCC; 

    font-family: Tahoma; 
    font-size: 11px; 
    font-style: normal; 
    font-weight: bold; 
    position: relative; 
    height: 21px; 
    line-height:1.85em; 
} 

Answer 2

En raison de l'héritage CSS. La règle css ul#menu_nav a l'emportera toujours sur la règle .selected. Essayez de changer le sélecteur

#ul.menu_nav a.selected{ 

}