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

前端 未结 24 1826
夕颜
夕颜 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:05

    I came up with a solution that uses the url hash or localStorage depending on the availability of the latter with below code:

    $(function(){
        $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
            localStorage.setItem('activeTab', $(e.target).attr('href'));
        })
    
        var hash = window.location.hash;
        var activeTab = localStorage.getItem('activeTab');
    
        if(hash){
              $('#project-tabs  a[href="' + hash + '"]').tab('show');   
        }else if (activeTab){
            $('#project-tabs a[href="' + activeTab + '"]').tab('show');
        }
    });
    

提交回复
热议问题