引导选项卡更改父背景Jquery

我想找出一个更优雅的解决方案。但到目前为止，我的jquery技能有限

我想有更好的方法来实现下面的功能。 简而言之。我试图在单击时更改父对象的背景

现在，我只是添加一个类，然后从其他按钮中删除其他可能的类

相关HTML：

Jquery

你能帮我找到一个更好更优雅的解决方案吗？或者我可以做一些研究。因为现在很难维护，因为我会再添加几个按钮

谢谢你的帮助

---

编辑：我知道toggleClass。但在这种情况下，这并没有奏效。因为它在第二次单击时删除了类。

这只是使用数据属性将类保存在按钮本身中。您还可以使用removeClass中的函数和正则表达式在应用新类之前删除初始切换类

将来添加按钮时，只需确保按钮具有正确的数据目标类属性，并在css中设置了正确的类。只要遵循一致的命名约定，就不需要对javascript进行任何更改

$（“按钮[data toggle='tab']）。单击（函数（）{
$（'.widget latest posts'）.removeClass（函数（索引，类名）{
return（className.match（/（[a-z]{3,3}）-切换/g）| |[]）。join（“”）；
}
);
$（'.widget latest posts'）.addClass（$（this.attr（“数据切换类”））；
});
.bpp已切换{
背景：橙色！重要；
}
.blp已切换{
背景：石灰！重要；
}
.bpc已切换{
背景：紫色！重要；
}

埃本费尔斯·莱森斯韦特
贝利伯特
纽
阿克提夫

<div class="panel panel-widget widget-latest-posts">
                <div class="panel-heading">
                    <h3 class="widget-title">Ebenfalls lesenswert</h3>
                </div>

                <div class="panel-body">
                    <div class="btn-pref btn-group btn-group-justified btn-group" role="group" aria-label="...">
                            <div class="btn-group" role="group">
                                <button type="button" id="btn-popular-posts" class="btn btn-popular-posts" href="#tab1" data-toggle="tab"><i class="fa fa-fire"></i>
                                    <span class="hidden-xs">Beliebt</span>
                                </button>
                            </div>
                            <div class="btn-group" role="group">
                                <button type="button" id="btn-latest-posts" class="btn btn-latest-posts" href="#tab2" data-toggle="tab"><i class="fa fa-clock-o"></i>
                                    <span class="hidden-xs">Neu</span>
                                </button>
                            </div>
                            <div class="btn-group" role="group">
                                <button type="button" id="btn-popular-comments" class="btn btn-popular-comments" href="#tab3" data-toggle="tab"><i class="fa fa-commenting-o"></i>
                                    <span class="hidden-xs">Aktiv</span>
                                </button>
                            </div>
                        </div>

.bpp-toggled {
    background: orange !important;
}
.blp-toggled {
    background: lime !important;
}
.bpc-toggled {
    background: purple !important;
}

$("#btn-popular-posts").click(function() {

    $('.widget-latest-posts').addClass('bpp-toggled');
    $('.widget-latest-posts').removeClass('blp-toggled');
    $('.widget-latest-posts').removeClass('bpc-toggled');
});

$("#btn-latest-posts").click(function() {

    $('.widget-latest-posts').addClass('blp-toggled');
    $('.widget-latest-posts').removeClass('bpp-toggled');
    $('.widget-latest-posts').removeClass('bpc-toggled');
});

$("#btn-popular-comments").click(function() {

    $('.widget-latest-posts').addClass('bpc-toggled');
    $('.widget-latest-posts').removeClass('blp-toggled');
    $('.widget-latest-posts').removeClass('bpp-toggled');
});