CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapnavigation
Sahil Buddhadev
Sahil Buddhadev

Reputation: 73

Dynamic Bootstrap navigation with active tab

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>

Upvotes: 1

Views: 1975

Answers (2)

Shashi
Shashi

Reputation: 474

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
});

Upvotes: 2

Neelam Prajapati
Neelam Prajapati

Reputation: 3802

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#

Upvotes: 2

Related Questions