Wechselndes Hintergrundbild bootstrap nav-pills

Question

Ich wurde von einem Freund gebeten, eine Website zu erstellen. Ich habe Bootstrap 3 als Framework für die Website verwendet und ein kleines Stolperstein getroffen.

Mein Freund wollte einen Tabbed-Bereich, in dem sich das Hintergrundbild des Bereichs abhängig davon ändert, welcher Tab aktiv ist. Ich konnte es nur für den Tab-Bereich mit CSS verwenden, aber ich muss in der Lage sein, den gesamten Abschnitt Hintergrund und nicht nur die Registerkarte zu ändern.

Ich denke, es wird ein wenig JavaScript erforderlich sein, aber leider sind meine Fähigkeiten in diesem Bereich noch ein bisschen zu schwach, um zu wissen, wie man das macht, und google ist ungefähr so ​​hilfreich wie ein Loch im Kopf.

unten ist der Abschnitt von HTML, dass ich das Hintergrundbild müssen mit jedem Reiter

<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> 

Jede Hilfe

Answer 1

Legen Sie Ihre separaten CSS-Hintergrundbilder auf diese sehr geschätzt wird sich ändern:

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

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

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

Answer 2

Ich habe Ihren Code überprüft, alles funktioniert gut und wenn Sie nur den Inhalt Hintergrund ändern möchten, Carol McKay schrieb, was Sie in Ihrem Code hinzufügen müssen. Sie benötigen in diesem Fall keinen JavaScript-Code.
Ich habe kleines Beispiel mit Ihrem Code und bootsrap Klassen: jsfiddle-link
Alle Lücken Sie hängt Bootstrap-Klassen sehen können, beispielsweise durch Standardklasse .alert hat:

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

Und noch ein Beispiel mit Inhalt unter pills und sieht vertrauter aus): jsfiddle-link2