Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink

前端 未结 24 1550
夕颜
夕颜 2020-11-22 04:57

I\'m developing a web page in which I\'m using Twitter\'s Bootstrap Framework and their Bootstrap Tabs JS. It works great except for a few minor issues, one of which is I do

24条回答
  •  再見小時候
    2020-11-22 05:23

    I make sth like this for links with ajax #!# (e.g./test.com#!#test3) but you can modify it whatever you like

    $(document).ready(function() {
    
           let hash = document.location.hash;
           let prefix = "!#";
    
           //change hash url on page reload
           if (hash) {
             $('.nav-tabs a[href=\"'+hash.replace(prefix,"")+'\"]').tab('show');
           } 
    
           // change hash url on switch tab
           $('.nav-tabs a').on('shown.bs.tab', function (e) {
              window.location.hash = e.target.hash.replace("#", "#" + prefix);
           });
     });
    

    Example with simple page on Github here

提交回复
热议问题