更改背景圖片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

回答

相關問題