Comment créer un bouton bascule avec HTML et CSS ?

Création d'un bouton bascule avec HTML et CSS

Vous souhaitez créer un bouton bascule en utilisant HTML et CSS, avec le comportement de verrouillage dans un état poussé lorsque vous cliquez une fois et relâché lorsque vous cliquez à nouveau. Pour y parvenir, vous pouvez envisager les approches suivantes :

Utilisation de jQuery

L'approche recommandée consiste à utiliser jQuery, une bibliothèque JavaScript, pour obtenir le comportement souhaité. jQuery fournit une méthode toggleClass() qui vous permet de basculer entre deux états pour la classe d'un élément. Cela vous permet de créer un bouton bascule avec deux classes qui ont un style différent pour les états "poussé" et "relâché".

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
#button {
    /* Styling for released state */
}
#button.down {
    /* Styling for pushed state */
}
</style>
<script>
$(document).ready(function() {
    $('#button').click(function() {
        $(this).toggleClass("down");
    });
});
</script>

Dans cet exemple, l'élément "bouton" recevra la classe supplémentaire " vers le bas" lorsque vous cliquez dessus, ce qui change son apparence en l'état "poussé". Lorsque vous cliquez à nouveau, la classe « down » sera supprimée, la ramenant à l'état « publié ».

Utilisation de CSS et d'éléments supplémentaires

Bien que ce ne soit pas aussi simple que en utilisant jQuery, il est possible d'imiter le comportement du bouton bascule en utilisant CSS et des éléments HTML supplémentaires. Cette technique consiste à utiliser des cases à cocher et à les styliser pour qu'elles ressemblent à des boutons. Cependant, pour obtenir une apparence transparente, il faut utiliser des spans, des divs et du JavaScript supplémentaires pour gérer les changements d'é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!