webentwicklung-frage-antwort-db.com.de

Hinzufügen und Entfernen von aktiven Klassen auf der Schaltfläche mit der Funktion jquery onclick

Ich verwende diese Schaltflächengruppenstruktur tatsächlich mit Bootstrap. Jetzt muss ich jeder Schaltfläche eine aktive Klasse hinzufügen, wenn ich darauf klicke. Und entferne es, wenn ich auf eine andere Schaltfläche klicke.

Das ist meine HTML-Struktur, ist ungefähr so:

<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>

Jemand, der mir helfen könnte? Vielen Dank.

6
Giulio Bambini

wenn die Klasse .active nicht von active entfernt werden soll, nachdem Sie darauf geklickt haben, verwenden Sie bitte addClass anstelle von toggelClass

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

jsfiddle Beispiel

es ist auch empfehlenswert, die Auswahl der Schaltflächen einzugrenzen. Ich habe #heade id und .btn-group[role='group'] verwendet, wodurch das Skript nur auf Schaltflächen in allen Schaltflächengruppen angewendet wird. iside <div id="header"></div>

und hier hast du eine .active Klassendefinition:

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

Sie suchen nach etwas wie:

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

Check jsFiddle

3
kosmos

Ich hoffe, das wird dir helfen, denn es funktioniert perfekt für mich

<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>

Probier diese

0
Sai Deepak

Sie sollten hier eine Kombination aus .each () und .click () verwenden. Es wird also auf jeden Knopf anstatt nur auf den ersten gerichtet

$('#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