Html 如何使我的下拉链接在激活时保持蓝色_Html_Css_Twitter Bootstrap_Accordion

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

html css twitter-bootstrap

Html 如何使我的下拉链接在激活时保持蓝色,html,css,twitter-bootstrap,accordion,Html,Css,Twitter Bootstrap,Accordion,我无法使引导手风琴下拉链接在激活时保持蓝色。尝试过各种各样的事情，但没有一件奏效。我做错了什么？这是我的密码 <div class="visible-sm visible-xs" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="t

我无法使引导手风琴下拉链接在激活时保持蓝色。尝试过各种各样的事情，但没有一件奏效。我做错了什么？这是我的密码

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


找到合适的候选人
按地点、行业、特定技能和/或职业吸引和招聘候选人
找到合适的候选人
按地点、行业、特定技能和/或职业吸引和招聘候选人
动物保护协会的陈词滥调，埃尼姆·埃乌斯莫德的高寿命accusamus terry richardson广告鱿鱼。3狼月亮奥特餐厅，非丘比特滑板多洛早午餐。食品车奎奴亚藜。早午餐3狼月亮临时，圣塔阿利夸放了一只鸟在上面鱿鱼单一来源咖啡NullaAssumenda shoreditch等Nihil anim keffiyeh helvetica，工艺啤酒工人wes anderson cred Nesciut sapiente ea proident。纯素食主义者，屠夫副洛莫。紧身裤从工艺啤酒场到餐桌，生料牛仔布美学合成物，你可能还没听说过accusamus labore可持续VHS。

您需要将自定义类附加到切换面板。您可以使用

jQuery

实现这一点

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

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

这将把类

打开面板

添加到活动面板

其次，将此添加到css中：

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

这将为单击的面板添加bg颜色

第三，稍微更改一下html，这样页面加载时蓝色背景就会出现。这可以通过手动将

打开面板

类添加到默认面板来完成

更改此项：

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

为此：

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