• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Zagnieżdżanie nav pills w bootstrapie

Object Storage Arubacloud
0 głosów
141 wizyt
pytanie zadane 17 września 2016 w HTML i CSS przez Adam Ostrogórski Obywatel (1,070 p.)

Witam,

mam pytane, czy ktoś wie, w jaki sposób można zagnieżdżać nav pills w bootstrapie?

Przykładowo: 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?

Bo mi działa, ale tylko przy jednokrotnym kliknięciu. Tzn. żeby ponownie naciśnięty nav pills wyświetlił zawartość, muszę odświeżyć stronę, a podejrzewam, że jest jakieś na to rozwiązanie.

Oto kod przykładowy:

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

 

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
1 odpowiedź 187 wizyt
pytanie zadane 13 września 2016 w HTML i CSS przez Adam Ostrogórski Obywatel (1,070 p.)
0 głosów
1 odpowiedź 158 wizyt
pytanie zadane 9 października 2016 w HTML i CSS przez Sebastian Westfal Obywatel (1,020 p.)
0 głosów
1 odpowiedź 291 wizyt
pytanie zadane 20 października 2018 w HTML i CSS przez yato_ Początkujący (350 p.)

92,666 zapytań

141,564 odpowiedzi

320,019 komentarzy

62,031 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...