Conserver l’état actif css après clic avec jQuery

J’utilise des cours psuedo et j’ai du mal à comprendre comment interagir avec eux à l’aide de jQuery. Je penserais que cela revient à append une classe à un élément, mais si vous regardez dans mon exemple, je ne sais pas comment procéder. J’ai fait quelques recherches, et peut-être que je le regarde de la mauvaise façon.

Quand un bouton ( ) est cliqué, il change avec: actif,: avant, actif :: avant etc.

Je veux que ce bouton rest enfoncé après avoir été poussé. (jusqu’à ce qu’un autre soit cliqué)

  .lbButton { background-color:#eaa33d; font-family: 'Open Sans', sans-serif; font-size:18px; text-decoration:none; color:#000; position:relative; padding:10px 20px; padding-right:50px; background-image: url('../images/nav_background1.png'); border-radius: 5px; box-shadow: inset 0px 1px 0px #ede8ba, 0px 5px 0px 0px #ab6c11, 0px 10px 5px #999; margin-left: 30px;cursor: pointer; } .lbButton:active { top:3px; box-shadow: inset 0px 1px 0px #ede8ba, 0px 2px 0px 0px #ab6c11, 0px 5px 3px #999; } .lbButton::before { background-color:#4e3108; background-image:url(http://heritageinncharlottesville.com/images/down_arrow.png); background-repeat:no-repeat; background-position:center center; content:""; width:20px; height:20px; position:absolute; right:15px; top:50%; margin-top:-9px; border-radius: 50%; box-shadow: inset 0px 1px 0px #19120f, 0px 1px 0px #827066; } .lbButton:active::before { top:50%; margin-top:-12px; box-shadow: inset 0px 1px 0px #827066, 0px 3px 0px #19120f, 0px 6px 3px #382e29; }

Quelle est la façon de s’y prendre avec jQuery?

Cliquez sur le bouton, le bouton semble enfoncé. J’aimerais que cet état rest actif après le relâchement de la souris – et jusqu’à ce que le prochain soit poussé.

Remarque: j’ai mis ce bouton en ligne et copié le fichier css. Je l’ai modifié pour mon jeu de couleurs

Ce serait mieux géré avec les classes de basculement jQuery. La pseudo-classe active n’était pas destinée à ce type de fonctionnalité.

 var spans = $('span.lbButton'); spans.on('click', function(){ spans.removeClass('active'); $(this).addClass('active'); });

Étant donné l’extrait précédent, appliquez les définitions de style appropriées à la classe active .

Etant donné que vous souhaitez que les styles restnt sur la span jusqu’à ce que vous cliquiez span une autre span , nous vous suggérons de créer une classe pour la span qui possède tout le style que vous souhaitez lorsqu’elle est active, puis une classe par défaut pour cette classe lorsque la span n’est pas active.

Je suppose que nous avons deux classes ici, active-span et default-span . Vous semblez connaître vos css, vous pouvez donc les définir.

jQuery:

 $('span').click(function() { $('span').removeClass('active-span'); $(this).addClass('active-span'); });

Fiddle: http://jsfiddle.net/gromer/ZX7yg/