web-dev-qa-db-fra.com

Bouton: Actif avec JavaScript et CSS

Essayer de faire un simple bouton pour être dans un style actif différent quand on clique dessus. J'utilise HTML pour la présentation du bouton, CSS pour le style et j'espère utiliser un peu de JavaScript pour le faire.

Après avoir regardé autour de SO et découvert qu'il existe de nombreuses manières différentes, telles qu'utiliser Checkbox pour créer un bouton en CSS pur, ou jQuery ou JavaScript, je pense que JavaScript est la manière la plus proche que je regarde.

HTML

<button type="button" class="btn" id="btn1">Details</button>

CSS

.btn {
  background: #3498db;
  border-radius: 0px;
  font-family: Arial;
  color: #ffffff;
  font-size: 12px;
  padding: 2px 2px 2px 2px;
  text-decoration: none;
  height: 30px;
  width: 70px;
  margin-top: 5px;
  margin-bottom: 5px;
  display: block;
}

.btn:active {
  background: #cecece;
  text-decoration: none;
}

JavaScript

$('.btn').click(function(){
    if($(this).hasClass('active')){
        $(this).removeClass('active')
    } else {
        $(this).addClass('active')
    }
});

Voici un lien jsfiddle: http://jsfiddle.net/w5h6rffo/

Remarque additionnelle
L'objectif des fonctionnalités est d'avoir plusieurs boutons avec la même classe mais chaque bouton appelant une fonction différente. J'ai l'appel des fonctions qui fonctionnent, mais pas le bouton qui reste à un état actif au premier appui, puis un état inactif au prochain appui 

javascripthtmlcssbutton
6
axchink

Vous êtes sur le point de bien faire les choses, le mécanisme que vous avez construit en utilisant une vérification pour voir si votre élément a la classe active est Nice mais jQuery a une fonction toggleClass() qui vous permet d'écrire simplement ce qui suit:

$('.btn').click(function() {
    $(this).toggleClass('active');
});

Ensuite, dans votre CSS, au lieu de mettre en forme le psuedo :active, vous utiliserez un nom de classe comme ceci:

.btn.active {
    background: #cecece;
    text-decoration: none;
}

Vous voudrez aussi supprimer le sélecteur :active de votre CSS car vous n'en aurez plus besoin :)

Comme indiqué par dfsq , il est utile de conserver le sélecteur :active psuedo:

Je pense simplement que l'état actif (: actif) des éléments de contrôle est important. Par exemple, le bouton sans ce bouton aura le même aspect s’il s’agit de appuyé mais non cliqué (mouseout avant mouseup). UX est légèrement mieux avec: actif. Mais peut-être que je suis trop difficile

Pour cette raison, vous voudrez peut-être modifier le sélecteur comme suit:

.btn.active, .btn:active {
    background: #cecece;
    text-decoration: none;
}

Cela affectera à la fois l'état .active et l'état :active.

6
SidOfc

Vous pouvez utiliser classList.toggle () conjointement à une classe .active.

Donc, votre code ressemblerait à quelque chose comme ça:

<!DOCTYPE HTML>
<html>
    <head>
        <style>
        .btn {
            background: #3498db;
            border-radius: 0px;
            font-family: Arial;
            color: #ffffff;
            font-size: 12px;
            padding: 2px 2px 2px 2px;
            text-decoration: none;
            height: 30px;
            width: 70px;
            margin-top: 5px;
            margin-bottom: 5px;
            display: block;
        }

        .btn.active {
            background: #cecece;
            text-decoration: none;
        }
        </style>
    </head>
    <body>
        <button class="btn">Button</button>
        <button class="btn">Button</button>
        <button class="btn">Button</button>
        <button class="btn">Button</button>
    </body>
    <script>
        function toggleActiveState() {
            this.classList.toggle('active');
        }
        var btns = document.querySelectorAll('.btn');
        [].forEach.call(btns, function(btn) {
          btn.addEventListener('click', toggleActiveState, false);
        });
    </script>
</html>

Cette approche fonctionnerait pour un nombre infini de boutons.

4
Paul B.

Voir https://developer.mozilla.org/en-US/docs/Web/CSS/:active Qu'est-ce qui se passe maintenant, c'est que ça fonctionne très bien :-) mais ce que vous lui demandez de faire et quoi vous voulez que ce ne soit pas la même chose.

Je pense que vous devez corriger votre css et définir active comme une classe plutôt que comme une pseudo-classe (non testée, mais allez-y):

.active {
   background: #cecece;
}
3
David

Vous pouvez utiliser la fonction toggleClass (className) de jQuery.

http://api.jquery.com/toggleclass/

<script>
    $("button.btn").click(function() {
        $(this).toggleClass("active");
    });
</script>

<style>
    .active{
      // your active style
     }
<style>
1
Swarnendu Paul