bootstrap按钮组中给选中的按钮添加active样式

1.bootstrap选项卡中有一个按钮组
2.选中其中一个按钮时，去掉按钮组其他按钮的active样式，并对选中的按钮添加active样式
3.按如下写法，没有生效

<div class="btn-group">
                                                                                <button type="button" class="btn btn-outline-success active" onclick="SeState()">Running</button>
                                                                                <button type="button" class="btn btn-outline-success" onclick="SetState()">Off</button>
                                                                                <button type="button" class="btn btn-outline-success" onclick="SetState()">On</button>
                                                                        
                                                                    </div>



  function SetState() {                     
           var activePane = $(".container.tab-pane.active");//选中的tab pane
           activePane.find(".btn-group").each(function () {//遍历按钮组中每个button    
            if ($(this).hasClass('active')) {
                 $(this).removeClass("active");//移除active样式
            }          
        });
       $(this).addClass('active');//对选中的按钮添加active新式

源于chatGPT仅供参考

您可以尝试以下修改来实现对选中按钮的激活样式切换：

HTML:
```html
<div class="btn-group" id="buttonGroup">
    <button type="button" class="btn btn-outline-success active" onclick="SetState(this)">Running</button>
    <button type="button" class="btn btn-outline-success" onclick="SetState(this)">Off</button>
    <button type="button" class="btn btn-outline-success" onclick="SetState(this)">On</button>
</div>

JavaScript:

function SetState(button) {
    var buttonGroup = $(button).closest(".btn-group");
    buttonGroup.find(".btn").removeClass("active");  // 移除所有按钮的 active 样式
    $(button).addClass("active");  // 将当前点击的按钮添加 active 样式
}

在上面的代码中，我们给按钮组的父容器（<div class="btn-group">）添加了一个唯一的 id（buttonGroup），然后通过 $(button).closest(".btn-group") 来获取到所属的按钮组。接着，我们使用 buttonGroup.find(".btn") 找到该按钮组内所有的按钮，并移除它们的 active 样式。最后，将当前点击的按钮（button 参数）添加 active 样式。

请尝试以上修改，检查是否能够正确切换选中按钮的激活样式。如果还有其他问题，请随时向我提问。

```

你应该这么写，一句话

$(this).addClass("active").siblings('button').removeClass("active");

你可以参考下这篇文章：bootstrap导航栏 active无法动态显示
除此之外, 这篇博客: Bootstrap 给导航栏添加active中的 问题： 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

这里以Bootstrap官网提供的代码（部分）为例：

<ul class="nav navbar-nav">
    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
           aria-expanded="false">Dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
        </ul>
    </li>
</ul>

实现用户点击对应li，动态添加和移除active类。

思路：通过获取当前页面的URL与a标签的href进行遍历比较，如果相同则添加active类，否则删除。

// 导航栏点击触发active
$(document).ready(function () {
    // 遍历li标签，从而获取下面a标签的href，这里为了方便说明选用的是.nav类，在实际应用中可以使用id代替
    $('.nav').find('li').each(function () {
        var a = $(this).find('a:first')[0];
        // 判断a标签的href是否与当前页面的路径相同
        if ($(a).attr("href") === location.pathname) {
            $(this).addClass("active");
        } else {
            $(this).removeClass("active");
        }
    })
})

使用上述代码虽然解决了点击对应Link实现激活状态的问题，但是对于dropdown下拉框的情况则无法实现激活状态，原因是我在dropdown下拉框中的li标签设置了href，而dropdown下拉框本身的href为“#”，所以不会出现激活状态。

因此本人还是按照该博主的思路添加了如下代码：

// 导航栏点击触发active
$(document).ready(function () {
    // 遍历li标签，从而获取下面a标签的href，这里为了方便说明选用的是.nav类，在实际应用中可以使用id代替
    $('.nav').find('li').each(function () {
        var a = $(this).find('a:first')[0];
        // 判断a标签的href是否与当前页面的路径相同
        if ($(a).attr("href") === location.pathname) {
            $(this).addClass("active");
        } else {
            $(this).removeClass("active");
        }
    })
    // 处理dropdown的情况，这里为了方便说明选用的是.dropdown-menu类，在实际应用中可以使用id代替
    $('.dropdown-menu').find('li').each(function () {
        var classname = $(this).attr('class');
        if (classname === 'active') {
            $('.dropdown-menu').addClass('active');
        }
    })
})

通过上述代码，既可以实现点击对应Link使其处于激活状态，也保证点击dropdown下拉框时，也使其处于激活状态。