使用 jquery onclick 功能添加和删除按钮上的活动类

Question

我实际上是在使用这个按钮组结构和引导程序。现在，当我单击每个按钮时，我需要为每个按钮添加活动类。并在我点击另一个按钮时将其删除。

这是我的 HTML 结构，是这样的：

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

谁能帮助我？谢谢。

Answer 1

如果.active 类在点击后不应从活动 按钮中删除，请使用addClass 而不是toggelClass

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

jsfiddle example

缩小按钮选择范围也是一个好习惯，我使用了#heade id 和.btn-group[role='group']，这使得脚本仅应用于<div id="header"></div>之外的所有按钮组内的按钮

这里有.active 类定义：

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

Answer 2

你正在寻找类似的东西：

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

Check jsFiddle

Answer 3

您应该在这里使用 .each() 和 .click() 的组合。所以它会针对每个按钮而不是只针对第一个按钮

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

Answer 4

我希望这会对你有所帮助，因为它对我来说非常有效

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

试试这个