具有活动选项卡的动态Bootstrap导航

Question

I have created my project on Bootstrap 3.3.6 now I am facing a problem with navigation whenever I clicked on any menu that will reset as it is, but I want to set it as active tab. The Same problem happens with the sidebar. How can I resolve it ?

Thank You

<ul class="sidebar-menu">
  <li class="header">HEADER</li>
  <!-- Optionally, you can add icons to the links -->
  <li class="active"><a href="index.php"><i class="fa fa-dashboard"></i> <span>Dashboard</span></a></li>
  <li class="treeview">
    <a href="#"><i class="fa fa-book"></i> <span>Admin</span> <i class="fa fa-angle-left pull-right"></i></a>
    <ul class="treeview-menu">
      <li><a href="setting.php"><i class="fa fa-circle-o"></i> Setting</a></li>
      <li><a href="adduser.php"><i class="fa fa-circle-o"></i> Add User</a></li>
      <li><a href="users.php"><i class="fa fa-circle-o"></i> Users</a></li>
    </ul>
  </li>
</ul>

Answer 1

You can make tab active by writing this line of code in click event of tab

$(this).addClass("active");

here You can find example

http://www.bootply.com/70331#

Answer 2

There are two ways.

First (If your site is static)

Just change the static class "active" on each page. If you have three menus- one, two , three then you will set class="active" on all three subsequent pages you open.
Say for one you have one.html for two you have two.html then you have to add the classes as per the menu page and remove the class from last page element.

Second (Through jQuery)

$(document).ready(function () {
  $("PreviousElementName").removeClass("active");//removes last manu item class
  $('CurrentElement').addClass('active'); // adds new menu item class
});