如何使我的下拉链接在活动时保持蓝色

Question

我无法让 bootstrap 手风琴下拉链接在活动时保持蓝色。尝试了各种各样的东西，但都没有奏效。我究竟做错了什么？这是我的代码。

    <div class="visible-sm visible-xs" id="accordion" role="tablist" aria-multiselectable="true">
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
              <h4 class="panel-title">
                Advertise Jobs
              </h4>
         </a>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
           <h1>Reach the Right Candidates</h1>
           <p>Attract and recruit candidates by location, industry, specific skills and/or occupation</p>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                <h4 class="panel-title">
                 Source Talent 
                </h4>
            </a>

        </div>
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
          <h1>Reach the Right Candidates</h1>
           <p>Attract and recruit candidates by location, industry, specific skills and/or occupation</p>


        </div>
      </div>
      <div class="panel panel-2">
        <div class="panel-heading" role="tab" id="headingThree">
          <h4 class="panel-title">
            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              Recruit Socially
            </a>
          </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
      </div>

    </div>

JSfiddle demo

Answer 1

您需要将自定义类附加到切换面板。你可以通过jQuery 做到这一点。

首先，将此添加到您的 JS：

jQuery('.panel-heading a').click(function() {
    $('.panel-heading').removeClass('open-panel');
    $(this).parents('.panel-heading').addClass('open-panel');
});

这会将open-panel 类添加到活动面板中。

其次，将此添加到您的 css 中：

.open-panel h4 {
    background-color: #00aff0;
}

这会将背景色添加到点击的面板中。

第三，稍微修改一下你的html，这样当页面加载时蓝色的bg就会出现。这可以通过手动将open-panel 类添加到默认面板来完成。

改变这个：

<div class="panel-heading" role="tab">

到这里：

<div class="panel-heading open-panel" role="tab">