更改背景图像bootstrap nav-pills

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:.....
}

Answer 2

我检查了你的代码，一切正常，如果你只想改变内容背景，Carol McKay写了你必须在你的代码中添加的内容。在这种情况下，您不需要任何javascript代码。

我用您的代码和bootsrap类创建了一个小示例：jsfiddle-link

您可以看到的所有间隙都取决于引导程序类，例如，默认情况下，.alert类具有：

.alert {
  padding: 15px;
  margin-bottom: 20px;
  ...
}

还有一个例子，内容在pills下面，看起来更熟悉)：jsfiddle-link2