Bootstrap problem

Dział poświęcony JavaScriptowi - tworzeniu dynamicznym stron WWW.
Post Reply
Dawidi
Nowicjusz
Posty: 2
Dołączył(a): niedziela, 20 sierpnia 2017, 21:54

Bootstrap problem

Post przez Dawidi »

Hej chcę zrobić menu z przełączaną zawartością kategorii z przełączną zawartością. (Czyli nav menu z zawartością tab w których to tabach jest tab lista) Wszystko niby dobrze idzie, ale używając klas bootstrapa do określenia sekcji która ma się pojawiać i znikać służy klasa .tab-content. Problem w tym, że wewnętrzny chowany content też użyje tej klasy. Wynik tego jest taki, że następuje mały zgrzyt i nie zawsze chowa się poprzednia zawartość z głównego menu. Chodzi mi o taki efekt jak cennik pod tym linkiem (http://themes.iamabdus.com/angel/1.0/).

Ma ktoś jakiś pomysł na rozwiązanie tego? Mój kod wygląda tak :

Code: Zaznacz cały

<section id="price-list" class="price-list-main">
            <div class="container">
                <div class="container price-list-main-buttons">
                    <div class="nav nav-pills" id="list-tab-main" role="tablist">
                        <button class="btn btn-outline-primary active" id="main-option-1-list" data-toggle="pill" href="#main-option-1" role="tab">Paznokcie</button>
                        <button class="btn btn-outline-primary" id="main-option-2-list" data-toggle="pill" href="#main-option-2" role="tab">Włosy</button>
                        <button class="btn btn-outline-primary" id="main-option-3-list" data-toggle="pill" href="#main-option-3" role="tab">Zabiegi</button>
                        <button class="btn btn-outline-primary" id="main-option-4-list" data-toggle="pill" href="#main-option-4" role="tab">Masaże</button>
                    </div>
                </div>
                <div class="container">
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="main-option-1" role="tabpanel">
                            <div class="container ">
                                <div class="row">
                                    <div class="col-4 price-list">
                                        <div class="list-group" id="list-tab-price-1" role="tablist">
                                            <a class="active" id="list-home-list" data-toggle="list" href="#option-1-1" role="tab">price 1</a>
                                            <a class="" id="list-profile-list" data-toggle="list" href="#option-1-2" role="tab">price 2</a>
                                            <a class="" id="list-messages-list" data-toggle="list" href="#option-1-3" role="tab">price 3</a>
                                            <a class="" id="list-settings-list" data-toggle="list" href="#option-1-4" role="tab">price 4</a>
                                        </div>
                                    </div>
                                    <div class="col-8">
                                        <div class="tab-content" id="price-list-1">
                                            <div class="tab-pane fade show active" id="option-1-1" role="tabpanel">aa</div>
                                            <div class="tab-pane fade" id="option-1-2" role="tabpanel">ab</div>
                                            <div class="tab-pane fade" id="option-1-3" role="tabpanel">ac</div>
                                            <div class="tab-pane fade" id="option-1-4" role="tabpanel">ad</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="main-option-2" role="tabpanel">
                            <div class="container ">
                                <div class="row">
                                    <div class="col-4 price-list">
                                        <div class="list-group" id="list-tab" role="tablist">
                                            <a class=" active" id="list-home-list" data-toggle="list" href="#option-2-1" role="tab">price 1</a>
                                            <a class="" id="list-profile-list" data-toggle="list" href="#option-2-2" role="tab">price 2</a>
                                            <a class="" id="list-messages-list" data-toggle="list" href="#option-2-3" role="tab">price 3</a>
                                            <a class="" id="list-settings-list" data-toggle="list" href="#option-2-4" role="tab">price 4</a>
                                        </div>
                                    </div>
                                    <div class="col-8">
                                        <div class="tab-content" id="price-list-2">
                                            <div class="tab-pane fade show active" id="option-2-1" role="tabpanel">ba</div>
                                            <div class="tab-pane fade" id="option-2-2" role="tabpanel">bb</div>
                                            <div class="tab-pane fade" id="option-2-3" role="tabpanel">bc</div>
                                            <div class="tab-pane fade" id="option-2-4" role="tabpanel">bd</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="main-option-3" role="tabpanel">
                            <div class="container">
                                <div class="row">
                                    <div class="col-4 price-list">
                                        <div class="list-group" id="list-tab" role="tablist">
                                            <a class=" active" id="list-home-list" data-toggle="list" href="#option-3-1" role="tab">price 1</a>
                                            <a class="" id="list-profile-list" data-toggle="list" href="#option-3-2" role="tab">price 2</a>
                                            <a class="" id="list-messages-list" data-toggle="list" href="#option-3-3" role="tab">price 3</a>
                                            <a class="" id="list-settings-list" data-toggle="list" href="#option-3-4" role="tab">price 4</a>
                                        </div>
                                    </div>
                                    <div class="col-8">
                                        <div class="tab-content" id="price-list-3">
                                            <div class="tab-pane fade show active" id="option-3-1" role="tabpanel">ca</div>
                                            <div class="tab-pane fade" id="option-3-2" role="tabpanel">cb</div>
                                            <div class="tab-pane fade" id="option-3-3" role="tabpanel">cc</div>
                                            <div class="tab-pane fade" id="option-3-4" role="tabpanel">cd</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="main-option-4" role="tabpanel">
                            <div class="container">
                                <div class="row">
                                    <div class="col-4 price-list">
                                        <div class="list-group" id="list-tab" role="tablist">
                                            <a class=" active" id="list-home-list" data-toggle="list" href="#option-4-1" role="tab">price 1</a>
                                            <a class="" id="list-profile-list" data-toggle="list" href="#option-4-2" role="tab">price 2</a>
                                            <a class="" id="list-messages-list" data-toggle="list" href="#option-4-3" role="tab">price 3</a>
                                            <a class="" id="list-settings-list" data-toggle="list" href="#option-4-4" role="tab">price 4</a>
                                        </div>
                                    </div>
                                    <div class="col-8">
                                        <div class="tab-content" id="price-list-4">
                                            <div class="tab-pane fade show active" id="option-4-1" role="tabpanel">da</div>
                                            <div class="tab-pane fade" id="option-4-2" role="tabpanel">db</div>
                                            <div class="tab-pane fade" id="option-4-3" role="tabpanel">dc</div>
                                            <div class="tab-pane fade" id="option-4-4" role="tabpanel">dd</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
Góra
Post Reply

Powrót do