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

前端 未结 24 1551
夕颜
夕颜 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条回答
  •  旧时难觅i
    2020-11-22 05:04

    This works in Bootstrap 3 and improves dubbe and flynfish 's 2 top answers by integrating GarciaWebDev 's answer as well (which allows for url parameters after the hash and is straight from Bootstrap authors on the github issue tracker):

    // Javascript to enable link to tab
    var hash = document.location.hash;
    var prefix = "tab_";
    
    if (hash) {
        hash = hash.replace(prefix,'');
        var hashPieces = hash.split('?');
        activeTab = $('.nav-tabs a[href=' + hashPieces[0] + ']');
        activeTab && activeTab.tab('show');
    } 
    
    // Change hash for page-reload
    $('.nav-tabs a').on('shown', function (e) {
        window.location.hash = e.target.hash.replace("#", "#" + prefix);
    });
    

提交回复
热议问题