Question

使用以下代码，我无法很好地使用选项卡的导航。发生的事情是当我点击前两个标签 - Notices and Offers时，它显示相关内容并隐藏前一个标签。但是当我点击学生时，它只是将学生的内容添加到现有学生中。现有的不会消失。我做错了吗？需要改进吗？我正在使用最新的bootstrap版本。可以在http://www.asmsocplacements.dx.am/adheretest.php

查看实时预览

＆＃13;

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

＆＃13;

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

第3个Bootstrap Nav-tab未打开

1 个答案: