Bootstrap选项卡更改父级背景Jquery

Question

即时通讯试图找出一个更优雅的解决方案。但截至目前，我的jquery技能有限。

我想像有一个更好的方式来实现以下功能。 用几句话。我试图在点击时更改父级的背景。

现在，我只需添加一个类，并与其他按钮删除其他可能的类。

相关HTML：

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

相关CSS：

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

jQuery的

$("#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'); 
}); 

能否请你帮我一个更好更完美的解决方案或许关键字我可以在做一些研究。因为现在，这是非常难以维持，因为我会增加几个按钮。

感谢您的帮助！

编辑：我知道toggleClass。但那在那种情况下没有效果。因为它只是在第二次点击时删除课程。

Answer 1

这只是使用数据属性召开类别中的按钮本身。您也可以使用正则表达式的removeClass中的函数在应用新的类之前移除最初的切换类。

在将来，当您添加的按钮，你只需要确保按钮具有正确的数据target-class属性和适当的类在你的CSS设置。只要您遵循一致的命名约定，就不需要更改JavaScript。

$("button[data-toggle='tab']").click(function() { 
 
    $('.widget-latest-posts').removeClass(function (index, className) { 
 
     return (className.match (/([a-z]{3,3})-toggled/g) || []).join(' '); 
 
    } 
 
); 
 
    $('.widget-latest-posts').addClass($(this).attr("data-toggled-class")); 
 
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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" data-toggled-class="bpp-toggled"><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" data-toggled-class="blp-toggled"><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" data-toggled-class="bpc-toggled"><i class="fa fa-commenting-o"></i> 
 
      <span class="hidden-xs">Aktiv</span> 
 
     </button> 
 
    </div> 
 
</div>