0

只有当前活动的标签显示相应的内容，而点击其他标签，例如a 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>
4

2 回答 2

0

尝试在您的 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>
于 2016-12-15T00:16:44.730 回答
0

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

于 2021-06-10T06:33:56.823 回答