Enable Deep Linking to the Bootstrap Tabs Component
In this article, we going to see how to enable deep linking to the Bootstrap tabs component. When you click on the link it leads to the relevant page and it becomes shareable. For each of the tabs have own URL structure but in Bootstrap 4 that has been disabled by default.
If you try to take the URL of a tab and open it in another window the corresponding tab will be shown. By customizing the Bootstrap 4 tab component behavior, we going to enable each tab URL structure based on the target attribute value. Getting the location of the active tab we going to load the attribute value in the new URL. Use the following code end of the body tag.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
jQuery(document).ready(function($){ var url = window.location.href; if (url.indexOf("#") > 0){ var activeTab = url.substring(url.indexOf("#") + 1); $('.nav[role="tablist"] a[href="#'+activeTab+'"]').tab('show'); } $('a[role="tab"]').on("click", function() { var newUrl; const hash = $(this).attr("href"); newUrl = url.split("#")[0] + hash; history.replaceState(null, null, newUrl); }); }); |
Conclusion:
I hope this will help to enable deep linking to the Bootstrap tabs component. If you have any doubts about this topic let me know in the comment box. If you loved this article share it with your friends.
