Question

我刚刚和Bootstraps Button Group一起玩，在我的网页上显示和隐藏div。也许我是愚蠢的，但是有人能指出我在正确的方向上点击时使所选按钮处于活动状态吗？

HTML（按钮）：

<div class="btn-group" role="group" aria-label="...">
     <button id="1" type="button" class="btn btn-default">Button 1</button>
     <button id="2" type="button" class="btn btn-default">Button 2</button>
     <button id="3" type="button" class="btn btn-default">Button 3</button>
</div>

JQuery的：

<script>
$("#1").click(function(){
    $("#first-section").show();
    $("#second-section").hide();
    $("#third-section").hide();
});

$("#2").click(function(){
    $("#first-section").hide();
    $("#second-section").show();
    $("#third-section").hide();
});

$("#3").click(function(){
    $("#first-section").hide();
    $("#second-section").hide();
    $("#third-section").show();
});
</script>

我假设我必须在每个函数的.show（）附近做一些事情，所以在按钮上应用活动类。任何向正确方向推进都会有很大的帮助！

Answer 1

你可以创建一个在点击时激活按钮的类：例如点击可能吗？未经测试但它应该可以正常工作

The ToggleClass method:

此方法检查每个元素是否有指定的类名。该如果丢失则添加类名，如果已经设置则删除 - 这个创造一个切换效果。

(".btn").click(function() {
   // Instead of directly editing CSS, toggle a class
   $(".btn").removeClass("clicked");//removes classes everywhere
   $(this).toggleClass("clicked");//adds the class at the right button
});
.clicked {
   background-color: #differentcolorhere;
}

你也可以为每个按钮自动执行

<script>
$("#1").click(function(){
    $("#first-section").show();
    $("#second-section").hide();
    $("#third-section").hide();

});

$("#2").click(function(){
    $("#first-section").hide();
    $("#second-section").show();
    $("#third-section").hide();

});

$("#3").click(function(){
    $("#first-section").hide();
    $("#second-section").hide();
    $("#third-section").show();
});
</script>

Answer 2

在点击事件中尝试此操作：

$(this).addClass('Active');

在设置Active之前，您可以从所有按钮中删除该类：

$("button.btn").removeClass('Active');

活动引导按钮

2 个答案: