Cambiare immagine di sfondo bootstrap nav-pills

Question

Mi è stato chiesto da un amico di creare un sito web. Ho usato bootstrap 3 come framework per il sito web e ho colpito un po 'di un ostacolo.

Il mio amico voleva una sezione a schede in cui l'immagine di sfondo della sezione cambia a seconda di quale scheda è attiva. Sono stato in grado di farlo funzionare solo per il pannello delle schede con css, ma ho bisogno di essere in grado di cambiare l'intero background della sezione e non solo il pannello delle schede.

Penso che richiederà un po 'di JavaScript, ma sfortunatamente le mie capacità in quell'area sono ancora un po' troppo deboli per sapere come fare questo, e google è stato utile tanto quanto un buco nella testa.

sotto è la sezione del codice HTML che ho bisogno l'immagine di sfondo a cambiare con ogni scheda

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

Ogni aiuto è apprezzato

Answer 1

Metti le immagini css sfondo separati su queste:

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

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

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

Answer 2

Ho controllato il tuo codice, tutto funziona bene e se vuoi modificare solo lo sfondo dei contenuti, Carol McKay scrivi ciò che devi aggiungere nel tuo codice. In questo caso non è necessario alcun codice javascript.
Ho creato piccolo esempio con il codice e bootsrap classi: jsfiddle-link
Tutte le lacune si possono vedere dipende classi bootstrap, per esempio, per classe di default .alert ha:

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

E un altro esempio con contenuti sotto pills e sembra più familiare): jsfiddle-link2