Zmiana obrazu początkowego obrazu początkowego nav-pills

Question

Zostałem poproszony przez znajomego o utworzenie strony internetowej. Użyłem bootstrap 3 jako ramy dla strony internetowej i trafiłem trochę na przeszkodę.

Moja przyjaciółka chciała sekcji z zakładkami, w której obraz w tle sekcji zmienia się w zależności od tego, która zakładka jest aktywna. Byłem w stanie sprawić, by działał on tylko na okienku kart przy użyciu css, ale muszę mieć możliwość zmiany całego tła sekcji, a nie tylko panelu zakładek.

Myślę, że będzie to wymagało trochę JavaScriptu, ale niestety moje umiejętności w tej dziedzinie są wciąż zbyt słabe, aby wiedzieć, jak to zrobić, a Google jest tak samo pomocne jak dziura w głowie.

poniżej jest odcinek html że muszę obraz tła, aby zmienić z każdej karcie

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

Każda pomoc jest mile widziana

Answer 1

Umieść swoje oddzielne obrazy tła CSS na nich:

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

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

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

Answer 2

Sprawdziłem twój kod, wszystko działa dobrze i jeśli chcesz zmienić tylko zawartość tła, Carol McKay napisał, co musisz dodać w swoim kodzie. W tym przypadku nie potrzebujesz żadnego kodu javascript.
stworzyłem mały przykład z kodem i bootsrap klasach: jsfiddle-link
Wszystkie luki można zobaczyć zależy klasy bootstrap, na przykład za pomocą domyślnej klasy .alert posiada:

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

I jeszcze jeden przykład z treścią poniższej pills i wygląda bardziej znajomo): jsfiddle-link2