навигация по вкладкам не работает в бутстрапе

Только текущая активная вкладка показывает соответствующий контент, при переходе на другую вкладку, например, href="b", соответствующий контент id="b" не отображается. то же самое применимо ко всем другим вкладкам.

Peter Pan, CEO Danny Witherspoon, CFO Agumbe Tang, CTO Alberto Somayya, Exec.Chef 
           <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade in active" id="peter">
               <h3>Peter Pan<small>Chief Epicurious Officer</small></h3>



                <p>Our CEO, Peter, credits his hardworking East Asian immigrant parents who undertook the arduous journey to the shores of America with the intention of giving their children the best future. His mother's wizardy in the kitchen whipping up the tastiest dishes with whatever is available inexpensively at the supermarket, was his first inspiration to create the fusion cuisines for which <em>The Frying Pan</em> became well known. He brings his zeal for fusion cuisines to this restaurant, pioneering cross-cultural culinary connections.</p></div>


            <div role="tabpanel" class="tab-pane fade" id="danny">
               <h3>Danny Witherson <small>Chief Epicurious Officer</small></h3>

            <p>Our CFO, Danny, as he is affectionately referred to by his colleagues, comes from a long established family tradition in farming and produce. His experiences growing up on a farm in the Australian outback gave him great appreciation for varieties of food sources. As he puts it in his own words, <em>Everything that runs, wins, and everything that stays, pays!</em></p> </div>
            <div role="tabpanel" class="tab-pane fade" id="agumbe">
                <h3>Agumbe Tang <small>Chief Taste Officer</small></h3>
                <p>Blessed with the most discerning gustatory sense, Agumbe, our CFO, personally ensures that every dish that we serve meets his exacting tastes. Our chefs dread the tongue lashing that ensues if their dish does not meet his exacting standards. He lives by his motto, <em>You click only if you survive my lick.</em></p></div>
            <div role="tabpanel" class="tab-pane fade" id="alberto">

            <h3>Alberto Somayya <small>Executive Chef</small></h3>
            <p>Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. He says, <em>Put together the cuisines from the two craziest cultures, and you get a winning hit! Amma Mia!</em></p>
        </div>
            </div>

tabs twitter-bootstrap-3 tabnavigator
person Aravindh A    schedule 20.10.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Попробуйте включить следующие две строки в область заголовка html. Теперь это должно работать.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
person zhuangr    schedule 15.12.2016

arrow_upward
0
arrow_downward

Это потому, что вы забыли добавить код скрипта. В этом курсе Coursera каждый файл HTML будет иметь следующий код, написанный до </footer>

  <!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

добавьте этот фрагмент в свой файл aboutus.html, и он будет работать.

person cherry    schedule 10.06.2021