Html 水平选项卡不显示内容

水平标签html放在Moodle book中，当你查看它时，它不会显示我放在其中的内容，它只是空白，当你点击标签时，你可以看到内容，但它就像打开页面时的初始视图一样，没有显示任何内容，一旦点击标签，它的可查看内容就会显示出来，但这非常烦人。有什么帮助吗

 <!-- Start of horizontal tabs -->
    <ul class="nav nav-pills mb-0" id="pills-tab" role="tablist">
        <li class="nav-item">
            <a class="nav-link active show" id="h-tabs-t1-tab" data-toggle="pill" href="#h-tabs-t1" role="tab" aria-controls="h-tabs-t1" aria-selected="true">ONE</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="h-tabs-t2-tab" data-toggle="pill" href="#h-tabs-t2" role="tab" aria-controls="h-tabs-t2" aria-selected="false">TWO</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="h-tabs-t3-tab" data-toggle="pill" href="#h-tabs-t3" role="tab" aria-controls="h-tabs-t3" aria-selected="false">THREE</a>
        </li>
    </ul>
    <div class="tab-content card" id="pills-tabContent">
        <div class="tab-pane p-3 fade active show" id="h-tabs-t1" role="tabpanel" aria-labelledby="h-tabs-t1-tab">
            <h4>ONE</h4>
            <p>Nisl vel pretium lectus quam id leo. Dolor purus non enim praesent elementum facilisis leo vel. Sit amet nulla facilisi morbi tempus. Facilisis volutpat est velit egestas dui id ornare. Est lorem ipsum dolor sit amet.</p>
        </div>
        <div class="tab-pane p-3 fade" id="h-tabs-t2" role="tabpanel" aria-labelledby="h-tabs-t2-tab">
            <h4>TWO</h4>
            <p>Sollicitudin ac orci phasellus egestas tellus rutrum. Commodo odio aenean sed adipiscing diam donec adipiscing tristique risus. </p>
        </div>
        <div class="tab-pane p-3 fade" id="h-tabs-t3" role="tabpanel" aria-labelledby="h-tabs-t3-tab">
            <h4>THREE</h4>
            <p>Aliquet enim tortor at auctor urna nunc id. Sem integer vitae justo eget magna fermentum.</p>
        </div>
    </div>
<!-- End of horizontal tabs -->

一个
这是一个很好的例子。多洛·珀鲁斯（Dolor purus）非埃尼姆·普拉森（enim praesent）设施元素利奥·维尔（leo vel）。坐在我的面前。设备在使用过程中会发生故障。这是我的不幸

两个
芦丁。埃涅亚号航母正在准备起飞

三
拍卖人urna nunc id.的Aliquet enim tortor.Sem integer vitae justo eget magna发酵液

---

您是否在html中包含jquery库脚本

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

还将在div中添加“show”类来包装每个选项卡的内容

<div class="tab-pane p-3 fade show"
     id="h-tabs-t2"
     role="tabpanel"
     aria-labelledby="h-tabs-t2-tab">
       <h4>TWO</h4>
         <p>
            Sollicitudin ac orci phasellus egestas tellus rutrum. Commodo odio
            aenean sed adipiscing diam donec adipiscing tristique risus.
         </p>
</div>

两个

芦丁。奥迪奥准将
埃尼安已经准备好了。

这并没有改变这样一个事实：当我访问页面时，我看不到内容，只是一个空白选项卡。一旦我点击标签，我就可以看到内容，这是一个引导的事情吗？天哪…不知道下一步该怎么办。我不知道你遗漏了什么，但根据你问题中的代码，我实现了并在浏览器上打开了它。看起来“一”选项卡的内容显示得很好，唯一不起作用的是选项卡没有更改内容，我在上面的答案中已经修复了这一点