Bootstrap Tab History
Integrates HTML5
history state tracking with bootstrap/tab.js.
Allows users to use the browser's history functions when navigating through the tabs on your website. In particular, users can:
- Use
history.back. - Use
history.forward. - Use
location.reload. - Bookmark specific tabs.
Demo
Change the tabs below and then use the browser Back, Forward, and Reload
buttons. You can also try opening the link-anchors in a new window like so,
noting the tab is automatically switched to.
With history.pushState
The following tabs have data-tab-history-changer="push", and thus are navigable via Back
and Forward.
Tab group 1
Tab 1:1
Lorem ipsum
Tab 1:2
Lorem ipsum
Tab 1:3
Lorem ipsum
Tab group 2
Tab 2:1
Lorem ipsum
Tab 2:2
Lorem ipsum
Tab 2:3
Lorem ipsum
With history.replaceState
The following tabs have data-tab-history-changer="replace", and thus navigation does not
affect Back and Forward, but only Reload.
Tab group 3
Tab 3:1
Lorem ipsum
Tab 3:2
Lorem ipsum
Tab 3:3
Lorem ipsum
Tab group 2
Tab 4:1
Lorem ipsum
Tab 4:2
Lorem ipsum
Tab 4:3
Lorem ipsum