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>

试试这个

使用jquery onclick函数添加和删除按钮上的类

4 个答案: