Nav pills i tab w bootstrapie

Question

Witam,

mam projekt strony www w bootstrapie i dodałem elementy nav pills z tab content. W założeniu chciałem, aby najpierw były buttony grup, po ich naciśnięciu wyświetlały się buttony opcji z tych segmentów, a same opcje po naciśnięciu wyświetlały div z informacjami o danej opcji. I zrobiłem to w ten sposób:

                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                        <ul class="nav nav-pills center center-text">
                            <p><li class="center center-text"><a href="#A" class="center center-text middle" data-toggle="tab">Grupa A</a></li></p>
                            <p><li class="center center-text"><a href="#B" class="center center-text middle" data-toggle="tab">Grupa B</a></li></p>
                            <p><li class="center center-text"><a href="#C" class="center center-text middle" data-toggle="tab">Grupa C</a></li></p>
                        </ul>
                    </div>

                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                        <ul class="nav nav-pills center center-text">
                            <div class="tab-content">
                                <div class="tab-pane fade in col-xs-12 col-sm-12 col-md-12 col-lg-12" id="A">
                                    <p><li class="center center-text"><a href="#1" class="center center-text middle" data-toggle="tab">Opcja 1</a></li></p>
                                </div>

                                <div class="tab-pane fade in col-xs-12 col-sm-12 col-md-12 col-lg-12" id="B">
                                        <p><li class="center center-text"><a href="#2" class="center center-text middle" data-toggle="tab">Opcja 2</a></li></p>
                                   </div>

                                <div class="tab-pane fade in col-xs-12 col-sm-12 col-md-12 col-lg-12" id="C">                 
                                    <p><li class="center center-text"><a href="#4" class="center center-text middle" data-toggle="tab">Opcja 3</a></li></p>
                                    <p><li class="center center-text"><a href="#3" class="center center-text middle" data-toggle="tab">Opcja 4</a></li>
                                </div>
                            </div>
                        </ul>
                    </div>

                    <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">  
                        <div class="tab-content">
                            <div class="tab-pane fade in active" id="1">
                                <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 center center-text">  
                                    <img src="" alt="" class="img-responsive"/>
                                </div>  
                            </div>                             
                        </div>

                        <div class="tab-content">
                            <div class="tab-pane fade in active" id="2">
                                <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 center center-text">  
                                    <img src="" alt="" class="img-responsive"/>
                                </div>  
                            </div>                             
                        </div>

                        <div class="tab-content">
                            <div class="tab-pane fade in active" id="3">
                                <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 center center-text">  
                                    <img src="" alt="" class="img-responsive"/>
                                </div>  
                            </div>                             
                        </div>

                        <div class="tab-content">
                            <div class="tab-pane fade in active" id="4">
                                <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 center center-text">  
                                    <img src="" alt="" class="img-responsive"/>
                                </div>  
                            </div>                             
                        </div>

                    </div>

Działa, ale tylko jednokrotnie. Tzn. po naciśnięciu na wybraną grupę wyświetlają się buttony z opcjami tej grupy, a po naciśnięciu wybranej opcji wyświetla się div z informacjami. Jednak gdy przełączam dalej między grupami i wracam do raz już wyświetlonych, to nie da się danej opcji wybrać ponownie, trzeba odświeżyć stronę. Czy ktoś wie w czym może tkwić błąd?

Z góry dziękuję za wszelką pomoc.

Comments

Kod wstawiamy do bloków {...}code.

Rozejrzyj się po CKEditor menu.

Answer 1

To, co podałeś jest mega nie czytelne i strzelam, że nie podałeś artybutu data-toggle.
http://radek024.github.io/wp_wojewodztwa/

 

Sprawdź sobie kod źródłowy tego demka i porównaj samą schematykę ze swoim ;)

Comments

Mam data-toggle. Tzn. nie chodzi mi o zwykłe nav pills z tab content, bo to jest proste i działa bez zarzutu, wielokrotnie. Tylko chodzi o zagnieżdżone. Czyli mam raz segmenty, które są nav pills i one otwierają tab content każdej opcji. I opcje są nav pills dla divów z informacjami o nich. I jak to zrobić, żeby buttony z opcjami można było klikać wielokrotnie i aby wielokrotnie wyświetlały swój tab-content z informacjami?

---

OK, teraz skumałem - postaram się coś ogarnąć później ;)