改变背景图像bootstrap导航丸

Question

我被朋友要求创建一个网站.我使用bootstrap 3作为网站的框架,并且遇到了一些绊脚石.

我的朋友需要一个标签式部分,其中部分的背景图像会根据哪个选项卡处于活动状态而发生变化.我已经能够使用css使其适用于选项卡窗格,但我需要能够更改整个部分背景而不仅仅是选项卡窗格.

我认为它需要一些JavaScript,但不幸的是我在那个领域的技能仍然有点太弱,不知道如何做到这一点,谷歌一直有点像头上的洞.

下面是html的部分,我需要使用每个选项卡更改背景图像

<section id="about" class="content-section text-center">
  <div class="row">

    <div class="tab-content vertical-center">
      <div id="aboutus" class="tab-pane fade in active">
        <h2>...</h2>
        <p>...</p>
      </div>

      <div id="history" class="tab-pane fade">
        <h2>...</h2>
        <p>...</p>
      </div>

      <div id="chef" class="tab-pane fade">
        <h2>...</h2>
        <p>...</p>
      </div>
    </div>
  </div>
</section>

<div class="row">
  <div class="col-lg-12 nav-pills-bg">
    <ul class="nav nav-pills nav-justified">
      <li class="active">
        <a data-toggle="pill" href="#aboutus">...</a>
      </li>
      <li>
        <a data-toggle="pill" href="#history">...</a>
      </li>
      <li>
        <a data-toggle="pill" href="#chef">...</a>
      </li>
    </ul>
  </div>
</div>

任何帮助表示赞赏

Answer 1

将单独的 css 背景图像放在这些上：

#aboutus {
 background-image:.....
}

#history {
 background-image:.....
}

#chef {
 background-image:.....
}