Bootstrap navbar fetch data and change active tab

Question

I have a pretty common use case where I have a vertical nav bar to the left (with Home, Profile as nav options). By default, Home is active (highlighted in blue).

However, when I click on "Profile", I need to fetch /profile page and change the active tab.

I am confused as to how to implement this. I don't want to duplicate the nav bar html tags on all html pages. I want logic in one single html (layout.html).

But having logic in place, makes it difficult to update active tab and fetch content remotely.

Any help would be appreciated.

Answer 1

U have the specific event when the tab is active. Refer http://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var target = $(e.target).attr("href") // activated tab
  alert(target);
  //fetch the data through ajax
});