Update URL Hash When Switching Between Bootstrap Tabs - historyTabs

historyTabs is a jQuery/Bootstrap plugin to automatically update the hash of the URL when switching between tabs so that you can navigate back to the previous tab using the browser's back button.

The plugin uses HTML5 history API to set and replace the browser's session history stack. Compatible both Bootstrap 4 and Bootstrap 3 frameworks.

How to use it:

1. Download the plugin and then import the bootstrap-history-tabs.js script into your Bootstrap project.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>
<script src="/path/to/bootstrap-history-tabs.js"></script>

2. Just attach the function historyTabs() to the existing Bootstrap tabs component and the plugin will take care of the rest.

<div role="tabpanel">
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
      <li role="presentation" class="nav-item"><a href="#home" aria-controls="home" role="tab" data-toggle="tab" class="nav-link active">Home</a></li>
      <li role="presentation" class="nav-item"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab" class="nav-link">Profile</a></li>
      <li role="presentation" class="nav-item"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab" class="nav-link">Messages</a></li>
      <li role="presentation" class="nav-item"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab" class="nav-link">Settings</a></li>
  </ul>
  <!-- Tab panes -->
  <div class="tab-content" id="nav-tabContent">
      <div role="tabpanel" class="tab-pane fade show active" id="home">Home Tab</div>
      <div role="tabpanel" class="tab-pane fade" id="profile">Profile Tab</div>
      <div role="tabpanel" class="tab-pane" id="messages">Messages Tab</div>
      <div role="tabpanel" class="tab-pane fade" id="settings">Settings Tab</div>
  </div>
</div>

$(function(){
  $('a[data-toggle="tab"]').historyTabs();
});

---

This awesome jQuery plugin is developed by jeffdavidgreen. For more Advanced Usages, please check the demo page or visit the official website.