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

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

    This code selects the right tab depending on the #hash and adds the right #hash when a tab is clicked. (this uses jquery)

    In Coffeescript :

    $(document).ready ->
        if location.hash != ''
            $('a[href="'+location.hash+'"]').tab('show')
    
        $('a[data-toggle="tab"]').on 'shown', (e) ->
            location.hash = $(e.target).attr('href').substr(1)
    

    or in JS :

    $(document).ready(function() {
        if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show');
        return $('a[data-toggle="tab"]').on('shown', function(e) {
          return location.hash = $(e.target).attr('href').substr(1);
        });
    });
    
    0 讨论(0)
  • 2020-11-22 05:06

    I know this thread is very old, but I'll leave here my own implementation:

    $(function () {
      // some initialization code
    
      addTabBehavior()
    })
    
    // Initialize events and change tab on first page load.
    function addTabBehavior() {
      $('.nav-tabs a').on('show.bs.tab', e => {
        window.location.hash = e.target.hash.replace('nav-', '')
      })
    
      $(window).on('popstate', e => {
        changeTab()
      })
    
      changeTab()
    }
    
    // Change the current tab and URL hash; if don't have any hash
    // in URL, so activate the first tab and update the URL hash.
    function changeTab() {
      const hash = getUrlHash()
    
      if (hash) {
        $(`.nav-tabs a[href="#nav-${hash}"]`).tab('show')
      } else {
        $('.nav-tabs a').first().tab('show')
      }
    }
    
    // Get the hash from URL. Ex: www.example.com/#tab1
    function getUrlHash() {
      return window.location.hash.slice(1)
    }
    

    Note that I'm using a nav- class prefix to nav links.

    0 讨论(0)
  • 2020-11-22 05:09

    I would suggest you use the code provided by Bootstrap authors on their issue tracker on GitHub:

    var hash = location.hash
      , hashPieces = hash.split('?')
      , activeTab = $('[href=' + hashPieces[0] + ']');
    activeTab && activeTab.tab('show');
    

    You can find on the link to the issue more information about why they didn't choose to support that.

    0 讨论(0)
  • 2020-11-22 05:10
    $(function(){
      var hash = window.location.hash;
      hash && $('ul.nav a[href="' + hash + '"]').tab('show');
    });
    

    This code from http://github.com/twitter/bootstrap/issues/2415#issuecomment-4450768 worked for me perfectly.

    0 讨论(0)
  • 2020-11-22 05:10

    Combining peices from other answers, here is a solution that can open many levels of nested tabs:

    // opens all tabs down to the specified tab
    var hash = location.hash.split('?')[0];
    if(hash) {
      var $link = $('[href=' + hash + ']');
      var parents = $link.parents('.tab-pane').get();
      $(parents.reverse()).each(function() {
        $('[href=#' + this.id + ']').tab('show') ;
      });
      $link.tab('show');
    }
    
    0 讨论(0)
  • 2020-11-22 05:11

    I had to modify some bits for this to work for me. I am using Bootstrap 3 and jQuery 2

    // Javascript to enable link to tab
    var hash = document.location.hash;
    var prefix = "!";
    if (hash) {
        hash = hash.replace(prefix,'');
        var hashPieces = hash.split('?');
        activeTab = $('[role="tablist"] a[href=' + hashPieces[0] + ']');
        activeTab && activeTab.tab('show');
    }
    
    // Change hash for page-reload
    $('[role="tablist"] a').on('shown.bs.tab', function (e) {
        window.location.hash = e.target.hash.replace("#", "#" + prefix);
    });
    
    0 讨论(0)
提交回复
热议问题