web-dev-qa-db-fra.com

Ajouter et supprimer une classe active sur un bouton avec la fonction jquery onclick

J'utilise en fait cette structure de groupe de boutons avec bootstrap. Maintenant, je dois ajouter une classe active à chaque bouton lorsque je clique dessus. Et enlevez-vous quand je clique sur un autre bouton.

Ceci est ma structure HTML, est quelque chose comme ça:

<body>
    <div id="header">
        <div class="logo">Prova<span class="sec-logo">toscana</span>15</div>
        <div class="bottoni">
            <div class="btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-default" id="b1">12345</button>
                <button type="button" class="btn btn-default" id="b2">12345</button>
                <button type="button" class="btn btn-default" id="b3">12345</button>
                <button type="button" class="btn btn-default" id="b4">12345</button>
                <button type="button" class="btn btn-default" id="b5">12345</button>
                <button type="button" class="btn btn-default" id="b6">12345</button>
            </div>
        </div>
    </div>
</body>

Quelqu'un qui pourrait m'aider? Merci.

javascriptjqueryhtmltwitter-bootstrap
6
Giulio Bambini

si la classe .active ne doit pas être supprimée de active le bouton après avoir cliqué dessus, veuillez utiliser addClass au lieu de toggelClass

$("#header .btn-group[role='group'] button").on('click', function(){
    $(this).siblings().removeClass('active')
    $(this).addClass('active');
})

exemple jsfiddle

il est également judicieux de restreindre la sélection des boutons. J'ai utilisé #heade id et .btn-group[role='group'] qui permet d'appliquer le script uniquement aux boutons de tous les groupes de boutons. iside <div id="header"></div>

et vous avez ici la définition de la classe .active:

.btn.active{
    background-color: red;
}
4
tutok

Vous cherchez quelque chose comme:

$('.btn').on('click', function(){
    $(this).siblings().removeClass('active'); // if you want to remove class from all sibling buttons
    $(this).toggleClass('active');
});

Vérifiez jsFiddle

3
kosmos

J'espère que cela vous aidera car cela fonctionne parfaitement pour moi

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".btn").each(function(){
       $(this).click(function(){
          $(this).addClass("active");
          $(this).siblings().removeClass("active");
       });
    });
});
</script>

Essaye celui-là

0
Sai Deepak

Vous devez utiliser une combinaison de .each () et .click () ici. Donc, il va cibler chaque bouton au lieu de la première

$('#header .btn').each(function(){
    $(this).click(function(){
        $(this).siblings().removeClass('active'); // if you want to remove class from all sibling buttons
        $(this).toggleClass('active');
    });
});
0
Danny van Holten