javascript - Bootstrap 4 个选项卡 - 只有一个不工作

Question

我正在尝试为网站建立一个管理部分，管理员可以进入并更改有关网站的内容。我使用选项卡将此页面分成不同的部分，它们一直在工作，直到我添加了最新的一个，一旦我添加了，其中一个已经存在的部分就停止工作了。 这是代码 - 不起作用的是“当天的历史事实”选项卡:

<!-- This is within a .container-fluid -->
<ul class="nav nav-tabs">
    <li class="nav-item">
        <a href="#potd" data-toggle="tab" role="tab" class="nav-link active">Photo of the Day</a>
    </li>
    <li class="nav-item">
        <a href="#users" data-toggle="tab" role="tab" class="nav-link">Users</a>
    </li>
    <li class="nav-item">
        <a href="#forum" data-toggle="tab" role="tab" class="nav-link">Forum</a>
    </li>
    <li class="nav-item">
        <a href="#hfotd" data-toggle="tab" role="tab" class="nav-link">Historical Fact of The Day</a>
    </li>
    <li class="nav-item">
        <a href="#cntdwn" data-toggle="tab" role="tab" class="nav-link">Countdown</a>
    </li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="potd">
        <h3>Add a Photo of The Day</h3>
        <?php include 'create_potd.php'; ?>
        <h3>View Upcoming Photos of the Day</h3>
        <?php include 'view_potd.php'; ?>
    </div>
    <div class="tab-pane" id="forum">
        <h3>Create a category</h3>
        <?php include 'create_cat.php'; ?>
    </div>
    <div class="tab-pane" id="users">
        <h3>User List</h3>
        <?php include 'user_list.php'; ?>
    </div>
    <div class="tab-pane" id="hfotd">
        <h3>Add a Historical Fact of The Day</h3>
        <?php include 'create_hfotd.php'; ?>
        <h3>View Upcoming Historical Facts of the Day</h3>
        <?php include 'view_hfotd.php'; ?>
    </div>
    <div class="tab-pane" id="cntdwn">
        <h3>Change the current countdown</h3>
    </div>
</div>

我真的不知道问题出在哪里。提前致谢!

Answer 1

您所显示的代码没有任何问题。如果您的选项卡不起作用，那么它一定与您包含的内容有关。检查浏览器控制台是否有错误，然后检查包含内容是否生成有效的 HTML，并且所有标记均正确打开和关闭。这是您的代码，已被证明可以工作:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!-- This is within a .container-fluid -->
<ul class="nav nav-tabs">
    <li class="nav-item">
        <a href="#potd" data-toggle="tab" role="tab" class="nav-link active">Photo of the Day</a>
    </li>
    <li class="nav-item">
        <a href="#users" data-toggle="tab" role="tab" class="nav-link">Users</a>
    </li>
    <li class="nav-item">
        <a href="#forum" data-toggle="tab" role="tab" class="nav-link">Forum</a>
    </li>
    <li class="nav-item">
        <a href="#hfotd" data-toggle="tab" role="tab" class="nav-link">Historical Fact of The Day</a>
    </li>
    <li class="nav-item">
        <a href="#cntdwn" data-toggle="tab" role="tab" class="nav-link">Countdown</a>
    </li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="potd">
        <h3>Add a Photo of The Day</h3>
        php include 'create_potd.php';
        <h3>View Upcoming Photos of the Day</h3>
        php include 'view_potd.php';
    </div>
    <div class="tab-pane" id="forum">
        <h3>Create a category</h3>
        php include 'create_cat.php';
    </div>
    <div class="tab-pane" id="users">
        <h3>User List</h3>
        php include 'user_list.php';
    </div>
    <div class="tab-pane" id="hfotd">
        <h3>Add a Historical Fact of The Day</h3>
        php include 'create_hfotd.php';
        <h3>View Upcoming Historical Facts of the Day</h3>
        php include 'view_hfotd.php';
    </div>
    <div class="tab-pane" id="cntdwn">
        <h3>Change the current countdown</h3>
    </div>
</div>