更改背景图像引导导航药丸

Posted 2023-03-05

【中文标题】更改背景图像引导导航药丸

【英文标题】：Changing background image bootstrap nav-pills

【发布时间】：2016-04-27 11:55:01

【问题描述】：

一位朋友要求我创建一个网站。 我使用 bootstrap 3 作为网站的框架，但遇到了一些绊脚石。

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

我认为这需要一些 javascript，但不幸的是，我在这方面的技能仍然太弱，不知道如何做到这一点，而 google 的帮助就像脑袋里的一个洞一样。

下面是我需要随每个标签更改背景图像的 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>

感谢任何帮助

【问题讨论】：

你能在jsfiddle里加代码吗？

所以你自己没有尝试过……我们为什么要这样做？我只能建议您开始学习 javascript 的基础知识或聘请开发人员来完成您的项目。这不是根据您的要求提供的免费编程服务。

你的css在哪里，请发codepen.io/pen

今天过得不好@NewToJS ？

@CarolMcKay 不，我的日子过得很好。谢谢你的提问:)

【参考方案1】：

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

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

还有一个例子，内容低于pills，看起来更熟悉）：jsfiddle-link2

【参考方案2】：

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

#aboutus 
 background-image:.....


#history 
 background-image:.....


#chef 
 background-image:.....