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

您没有内容面板的活动课程。默认情况下，您需要以下内容来显示panel1内容：

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

Answer 2

我认为我们需要更多详细信息，因为您的代码工作正常

＆＃13;

<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>

＆＃13;

Bootstrap选项卡第一次无法正常工作

2 个答案: