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.