Bootstrap手风琴-活动按钮

Question

我有一台带有水平菜单的Bootstrap手风琴。 我正在尝试更改活动按钮的背景。

我在JDFIDDLE中玩了很多，没有任何结果。

为了不发疯并避免造成更大的混乱，我没有停下来寻求帮助。

请检查JSFIDDLE

JS：

$("#nav2 a").on("click", function(){
   $("#nav2").find(".active").removeClass("active");
   $(this).parent().addClass("active");
});

CSS：

#nav2  a:active,
#nav2  a:hover,
#nav2  a:focus {
   color: #fff; 
   background-color: #000 !important;
   font-weight: bold;
}

Answer 1

在我看来， 标签比手风琴更适合您要尝试的操作。

HTML：

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">Raw denim you probably haven't heard of them jean shorts Austin.</div>
    <div role="tabpanel" class="tab-pane" id="profile">Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.</div>
    <div role="tabpanel" class="tab-pane" id="messages">Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.</div>
    <div role="tabpanel" class="tab-pane" id="settings">Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater.</div>
  </div>

</div>

小提琴： http : //jsfiddle.net/j0cp4hkp/

Answer 2

尝试这个：

JQUERY

$("#headingOne a").on("click", function(){
   $(this).addClass("active");
   $("#headingOne").find('.active').not(this).removeClass("active");
});

我添加了以下CSS： .active { color:#ccc !important;}以便您可以看到哪个菜单项处于活动状态。

http://jsfiddle.net/ggChris/sqp2jkvz/