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背景图像放在这些上：

-Dorg.apache.jasper.compiler.Parser.STRICT_QUOTE_ESCAPING=false \”

Answer 2

我检查了您的代码，一切正常，如果您只想更改内容背景，Carol McKay会在代码中写下您要添加的内容。在这种情况下，您不需要任何JavaScript代码我用你的代码和bootsrap类创建了一个小例子：jsfiddle-link
您可以看到的所有差距取决于引导类，例如，默认类.alert具有：

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

还有一个示例，其内容低于pills并且看起来更熟悉了：jsfiddle-link2

更改背景图片bootstrap nav-pills

2 个答案: