更改背景图片bootstrap nav-pills

我的一个朋友问我创建了一个网站。我已经使用bootstrap 3作为网站的框架，并且遇到了一些绊脚石。更改背景图片bootstrap nav-pills

我的朋友想要一个标签区域，该区域的背景图像根据哪个标签处于活动状态而发生变化。我已经能够使用css为tab选项卡工作，但我需要能够更改整个区域背景，而不仅仅是选项卡窗格。

我认为这将需要一些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>

任何帮助表示赞赏

来源

2016-01-21 Damo

你可以在jsfiddle中添加代码吗？ –

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

你的CSS在哪里，请制作一个http://codepen.io/pen/ –

改变把你独立的CSS背景图像上这些部分：

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

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

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

来源

2016-01-21 10:38:07

我检查了你的代码，所有工作正常，如果你只想改变内容背景，Carol McKay写了你必须添加到你的代码中。在这种情况下，您不需要任何JavaScript代码。
我创建你的代码并bootsrap类小例子：jsfiddle-link
所有缝隙可以看到依赖自举类，例如，通过默认的类.alert有：

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

并通过下面pills内容多了一个例子，看起来更熟悉）：jsfiddle-link2

来源

2016-01-21 13:37:28

更改背景图片bootstrap nav-pills

回答

相关问题