第三个引导导航选项卡未打开答案

【问题标题】：3rd Bootstrap Nav-tab not opening第三个引导导航选项卡未打开
【发布时间】：2016-12-14 08:56:40
【问题描述】：

使用以下代码，我无法很好地使用选项卡的导航。发生的事情是，当我单击前两个选项卡 - 通知和优惠时，它会显示相关内容并隐藏较早的内容。但是当我点击学生时，它只是将学生的内容添加到现有的内容中。现有的不会消失。我有什么错误吗？需要什么改进吗？我正在使用最新的引导程序版本。实时预览可以在http://www.asmsocplacements.dx.am/adheretest.php看到

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div role="tabpanel">
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home1" data-toggle="tab" role="tab" aria-controls="tab1">Notices</a></li>
    <li role="presentation"><a href="#paneTwo2" data-toggle="tab" role="tab" aria-controls="tab2">Offers</a></li>
    <li role="presentation"><a href="#paneTwo1" data-toggle="tab" role="tab" aria-controls="tab2">Students</a></li>
    <li role="presentation"><a href="changepassword.php">Change Password</a></li>
    <li role="presentation"><a href="logout.php">Logout</a></li>
  </ul>
  <div id="tabContent1" class="tab-content">
    <div role="tabpanel" class="tab-pane fade in active" id="home1">
      <?php include 'adminnotices.php'; ?>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="paneTwo2">
      <?php include 'adminoffers.php'; ?>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="paneTwo1">
      <?php include 'adminstudents.php'; ?>
    </div>
  </div>
</div>

【问题讨论】：

你应该为你使用过的所有li使用链接和标签窗格
能否请您说明一下。我无法理解。

标签： html twitter-bootstrap twitter-bootstrap-3 tabs navigation

【解决方案1】：

<div role="tabpanel">
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home1" data-toggle="tab" role="tab" aria-controls="tab1">Notices</a></li>
    <li role="presentation"><a href="#paneTwo2" data-toggle="tab" role="tab" aria-controls="tab2">Offers</a></li>
    <li role="presentation"><a href="#paneTwo1" data-toggle="tab" role="tab" aria-controls="tab2">Students</a></li>
    <li role="presentation"><a href="#paneTwo3">Change Password</a></li>
    <li role="presentation"><a href="#paneTwo4">Logout</a></li>
  </ul>
  <div id="tabContent1" class="tab-content">
    <div role="tabpanel" class="tab-pane fade in active" id="home1">
      <?php include 'adminnotices.php'; ?>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="paneTwo2">
      <?php include 'adminoffers.php'; ?>
  </div>
    <div role="tabpanel" class="tab-pane fade" id="paneTwo1">
      <?php include 'adminstudents.php'; ?>
    </div>
<div role="tabpanel" class="tab-pane fade" id="paneTwo3">
      <?php include 'adminstudents.php'; ?>
    </div>
<div role="tabpanel" class="tab-pane fade" id="paneTwo4">
      <?php include 'adminstudents.php'; ?>
    </div>
</div>
  </div>

【讨论】：