Question

只有当前活动标签显示相应的内容，而点击其他标签例如href =“b”时，不显示id =“b”的相应内容。这同样适用于所有其他标签。

首席执行官Peter Pan Danny Witherspoon，首席财务官 Agumbe Tang，首席技术官 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>

Answer 1

尝试在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>

Answer 2

那是因为你忘记添加脚本代码了。在这个 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 文件中，它将起作用。

选项卡导航无法在引导程序中工作

2 个答案: