3rd Bootstrap Nav-tab无法打开

Question

Using the following code, I am unable to use the navigation of tabs well. What is happening is When I click on the first two tabs - Notices and Offers, it is displaying the relevant content and hiding the earlier one. But when I click on Students, it is only adding the content of students to the existing one. The existing one does not go away. Is there any mistake I'm doing? Any improvements required? I am using the latest bootstrap versions. Live preview can be seen at 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> 

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>