使twitter引导标签持久化的最佳方法

What is the best way of making these tabs persist?

使这些标签持续存在的最佳方法是什么？

http://twitter.github.com/bootstrap/javascript.html#tabs

To add some context, this is for a rails application. I'm passing an array [tab1, tab2] to my view, rendering both tabs and using the bootstrap tab plugin to toggle their visibility.

要添加一些上下文，这适用于rails应用程序。我将一个数组[tab1，tab2]传递给我的视图，渲染两个选项卡并使用引导选项卡插件来切换它们的可见性。

7 个解决方案

#1

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

此代码根据#hash选择正确的选项卡，并在单击选项卡时添加正确的#hash。（这使用jquery）

In Coffeescript :

在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 :

或者在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);
    });
});

#2

I wanted to improve the best answer here..

我想在这里改进最好的答案..

Credit goes to Sucrenoir, but if you want to avoid jumping on the page when you change tabs, use this improved code:

归功于Sucrenoir，但如果您想在更改标签时避免跳转页面，请使用此改进的代码：

$(document).ready(function() {
    // show active tab on reload
    if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show');

    // remember the hash in the URL without jumping
    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
       if(history.pushState) {
            history.pushState(null, null, '#'+$(e.target).attr('href').substr(1));
       } else {
            location.hash = '#'+$(e.target).attr('href').substr(1);
       }
    });
});

#3

Here is another way to solve the Problem.

这是解决问题的另一种方法。

First add a line to the click event to show the hash in the Addressbar

首先在click事件中添加一行以在地址栏中显示哈希值

$('#myTab').on('click', 'a', function (e) {
  e.preventDefault();
  // add this line
  window.location.hash = $(this).attr('href');
  $(this).tab('show');
})

Then make sure that the right tab is activated onload by adding this part to your document ready call.

然后通过将此部件添加到文档就绪调用中，确保激活正确的选项卡。

if(window.location.hash){
   $('#myTab').find('a[href="'+window.location.hash+'"]').tab('show');
}

All together you can write this:

你们可以写在一起：

// cache the id
var navbox = $('#myTab');
// activate tab on click
navbox.on('click', 'a', function (e) {
  var $this = $(this);
  // prevent the Default behavior
  e.preventDefault();
  // set the hash to the address bar
  window.location.hash = $this.attr('href');
  // activate the clicked tab
  $this.tab('show');
})

// if we have a hash in the address bar
if(window.location.hash){
  // show right tab on load (read hash from address bar)
  navbox.find('a[href="'+window.location.hash+'"]').tab('show');
}

#4

I wanted to improve the best two answers here.. :)

我想在这里改进最好的两个答案.. :)

Credit goes to Sucrenoir and d-wade.

归功于Sucrenoir和d-wade。

Because in code is used history API you can't use onchangehash (https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange). This code add the functionality of back button (https://developer.mozilla.org/cs/docs/Web/API/WindowEventHandlers/onpopstate).

因为在代码中使用的是历史API，所以不能使用onchangehash（https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange）。此代码添加了后退按钮的功能（https://developer.mozilla.org/cs/docs/Web/API/WindowEventHandlers/onpopstate）。

// show active tab on reload
if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show');
// remember the hash in the URL without jumping
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    if(history.pushState) {
        history.pushState(null, null, '#'+$(e.target).attr('href').substr(1));
    } else {
        location.hash = '#'+$(e.target).attr('href').substr(1);
    }
});
// remember to back button
window.onpopstate = function(e) {
    $('a[href="' + location.hash + '"]').tab('show');
};

#5

You can get the URL fragment (that's the part of the URL after #) on load using window.location.hash, and specifically set that tab as visible:

您可以使用window.location.hash在加载时获取URL片段（这是＃之后的URL的一部分），并专门将该选项卡设置为可见：

if (window.location.hash) {
    $(window.location.hash).tab('show')
}

#6

Another modified version if you don't want tab clicks to be added to the history, but also don't want the page jumping up and down:

另一个修改版本，如果您不希望将标签点击添加到历史记录中，但也不希望页面上下跳跃：

$(document).ready(function () {

  if (location.hash !== '') {
    $('a[href="' + location.hash + '"]').tab('show');
  }

  $("a[data-toggle='tab']").on("shown.bs.tab", function (e) {
    var hash = $(e.target).attr("href");
    if (hash.substr(0,1) == "#") {
      var position = $(window).scrollTop();
      location.replace("#" + hash.substr(1));
      $(window).scrollTop(position);
    }
  });

});

#7

Execute the following code after DOM load:

在DOM加载后执行以下代码：

$('a[data-toggle=tab]').on('click', function () {
    history.pushState(null, null, $(this).attr('href'));
});


if (window.location.hash) {
    $('a[data-toggle=tab][href="' + window.location.hash + '"]').tab('show');
}

However, this leads to poor UI experience, since currently active tab will shown first, and then it will be switched to a tab from location.hash

但是，这会导致较差的UI体验，因为当前活动的选项卡将首先显示，然后它将从location.hash切换到选项卡

#1