Maison  >  Article  >  interface Web  >  Comment créer un bouton bascule avec Sass et jQuery ?

Comment créer un bouton bascule avec Sass et jQuery ?

Barbara Streisand
Barbara Streisandoriginal
2024-11-02 02:26:02275parcourir

How to Create a Toggle Button with Sass and jQuery?

Création d'un bouton bascule avec Sass et jQuery

Si vous cherchez à créer un bouton bascule qui conserve son état au clic, vous Il faudra aller au-delà du CSS seul.

Approche sémantique

L'approche préférée consiste à utiliser une case à cocher, en la stylisant en fonction de son état coché. Cependant, cela peut impliquer des éléments et une complexité supplémentaires.

Solution jQuery

Une méthode plus efficace consiste à utiliser jQuery et deux images d'arrière-plan pour les différents états des boutons.

HTML :

<code class="html"><a id="button" title="button">Press Me</a></code>

JS :

<code class="js">$(document).ready(function() {
  $('a#button').click(function() {
    $(this).toggleClass("down");
  });
});</code>

CSS :

<code class="css">a {
  background: #ccc;
  cursor: pointer;
  border-top: solid 2px #eaeaea;
  border-left: solid 2px #eaeaea;
  border-bottom: solid 2px #777;
  border-right: solid 2px #777;
  padding: 5px 5px;
}

a.down {
  background: #bbb;
  border-top: solid 2px #777;
  border-left: solid 2px #777;
  border-bottom: solid 2px #eaeaea;
  border-right: solid 2px #eaeaea;
}</code>

Cette fonction jQuery fait basculer la classe "down" sur le bouton lorsque vous cliquez dessus. Les classes CSS définissent les images d'arrière-plan et les styles de bordure pour chaque état.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn