css changer de style d'un élément, cliquez sur

J'ai une liste d'éléments, et je veux changer de style d'un élément lorsque l'on clique sur un élément de liste(et que le style spécifique de rester le même jusqu'à ce que l'utilisateur appuie sur un autre élément de la liste).

J'ai essayé d'utiliser le 'active' de style, mais sans succès.

Mon code:

#product_types
{       
    background-color: #B0B0B0;
position: relative; /*overflow: hidden;*/
}


#product_types a:active
{
    background-color:yellow;
}

mais l'élément est "jaune" seulement un millième de seconde, alors que j'ai fait, cliquez sur...

OriginalL'auteur dana | 2011-05-23

  1. 12

    Utiliser l' :focus pseudo classe

    #product_types a:focus
{
 background-color:yellow;
}

    Voir cet exemple -> http://jsfiddle.net/7RASJ/

    L'accent pseudo classe travaille sur des éléments comme les champs de formulaire, des liens etc.

    toujours pas de travail
    Voir l'exemple de lien que j'ai posté ci-dessus. En outre, ce genre d'élément que vous le style?
    Vous utilisez Chrome ou Safari, n'est-ce pas?
    oui. mais il devrait fonctionner sur tous les navigateurs
    il est parfait, mais ne fonctionne pas du tout dans Chrome... aucune idée de pourquoi?

    OriginalL'auteur Sparky

  2. 4

    La raison pour laquelle cela ne fonctionne pas dans les autres navigateurs est liée à la css se concentrer spécification. Il déclare:

    L' :focus pseudo-classe ne s'applique alors qu'un élément a le focus
    (accepte les événements de clavier ou d'autres formes de saisie de texte).

    De sorte qu'il semble fonctionner parfaitement bien avec les champs de saisie de texte ou lorsque vous vous concentrez à l'aide de la touche de tabulation. Pour faire le ci-dessus est compatible avec d'autres navigateurs ajouter l'attribut tabindex à chaque élément et cela semble résoudre le problème.

    HTML:

    <ul>
    <li id = 'product_types'><a href='#' tabindex="1">First</a></li>
    <li id = 'product_types'><a href='#' tabindex="2">Second</a></li>
</ul>

    CSS:

    #product_types  {
    background-color: #B0B0B0;
    position: relative;
}

#product_types a:focus {     
    background-color:yellow;   
}

    JSFiddle Exemple

    OriginalL'auteur Biped