Bootstrap 选项卡第一次无法使用

Question

我正在尝试实现两个基本选项卡和面板。面板在页面加载时不显示内容（第 1 页）。但是，单击另一个选项卡可以很好地处理正确的内容（第 2 页），然后返回到第一个选项卡也可以正常工作（第 1 页）。

<ul class="nav nav-tabs">
    <li class="active"><a href="#panel1" data-toggle="tab">Page 1</a></li>
    <li><a href="#panel2" data-toggle="tab">Page 2</a></li>
</ul>

<div class="tab-content">
    <div id="panel1" class="tab-pane">
        Page 1
    </div>
    <div id="panel2" class="tab-pane">
        Page 2
    </div>
</div>

有没有我遗漏的东西？

Answer 1

您没有内容面板的活动 class。您需要以下内容才能默认显示 panel1 内容：

<div id="panel1" class="tab-pane show active">...

Answer 2

我认为我们需要更多详细信息，因为您的代码运行良好

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

<ul class="nav nav-tabs">
    <li class="active"><a href="#panel1" data-toggle="tab">Page 1</a></li>
    <li><a href="#panel2" data-toggle="tab">Page 2</a></li>
</ul>

<div class="tab-content">
    <div id="panel1" class="tab-pane show active">
       This is the content of page1............................
    </div>
    <div id="panel2" class="tab-pane">
       This is the content of page2............................
    </div>
</div>

Bootstrap 选项卡第一次无法使用

Bootstrap tabs not working the first time

javascript

bootstrap-tabs

bootstrap-4