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

Question

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

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

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

Answer 1

此代码根据#hash选择正确的选项卡,并在单击选项卡时添加正确的#hash.(这使用jquery)

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

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

Answer 2

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

归功于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);
       }
    });
});

Answer 3

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

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

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

然后onload通过将此部件添加到文档就绪调用中,确保激活了右侧选项卡.

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

你们可以一起写下这个:

// 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');
}

Answer 4

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

归功于Sucrenoir和d-wade.

因为在代码中使用了历史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');
};