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> 

Answer 2

对不起大家！ 意识到我在页脚的JavaScript函数中使用#hfotd ...真是个小菜一碟。