这是我处理嵌套选项卡的解决方案。 我只是添加了一个函数来检查活动选项卡是否有一个要激活的父选项卡。 这是函数:

function activateParentTab(tab) {
    $('.tab-pane').each(function() {
        var cur_tab = $(this);
        if ( $(this).find('#' + tab).length > 0 ) {
            $('.nav-tabs a[href=#'+ cur_tab.attr('id') +']').tab('show');
            return false;
        }
    });
}

并且可以像这样调用(基于@flynfish的解决方案):

var hash = document.location.hash;
var prefix = "";
if (hash) {
    $('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
    activateParentTab(hash);
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});

目前这个解决方案对我来说很好。 希望这能对其他人有用;)

结合其他答案，这里有一个解决方案，可以打开许多级别的嵌套选项卡:

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

更新

对于Bootstrap 3，将.on(' shows '，…)更改为.on('show .bs。选项卡”,…)

这是基于@dubbe的答案和这个SO接受的答案。它处理window.scrollTo(0,0)不正确工作的问题。问题是，当你替换标签上显示的url哈希时，浏览器将滚动到该哈希，因为它是页面上的一个元素。要解决这个问题，可以添加一个前缀，这样哈希就不会引用实际的页面元素

// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
    $('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});

使用实例

如果你有id="mytab"选项卡，你需要把你的链接像这样:

<a href="yoursite.com/#tab_mytab">Go to Specific Tab </a>

我提出了一个解决方案，使用url哈希或localStorage取决于后者的可用性，代码如下:

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

我只是有这个问题，但需要处理多个标签级别。代码相当丑陋(见评论)，但完成了它的工作:https://gist.github.com/JensRantil/4721860希望其他人会发现它有用(并随时提出更好的解决方案!)

虽然提供的JavaScript解决方案可以工作，但我采用了稍微不同的方式，不需要额外的JavaScript，但需要视图中的逻辑。你可以用一个标准的URL参数创建一个链接，比如:

<a href = "http://link.to.yourpage?activeTab=home">My Link</a>

然后，只需检测activeTab的值，在相应的<li>中写入'class="active"'

伪代码(在您的语言中相应地实现)。注意，如果本例中没有提供参数，我已经将'home'选项卡设置为默认活动。

$activetabhome = (params.activeTab is null or params.activeTab == 'home') ? 'class="active"' : '';
$activetabprofile = (params.activeTab == 'profile') ? 'class="active"' : '';

<li $activetabhome><a href="#home">Home</a></li>
<li $activetabprofile><a href="#profile">Profile</a></li>