这在Bootstrap 3中工作，并通过集成GarciaWebDev的答案来改善dubbe和flynfish的2个顶级答案(这允许在哈希之后的url参数，直接来自github问题跟踪器上的Bootstrap作者):

// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";

if (hash) {
    hash = hash.replace(prefix,'');
    var hashPieces = hash.split('?');
    activeTab = $('.nav-tabs a[href=' + hashPieces[0] + ']');
    activeTab && activeTab.tab('show');
} 

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

用于引导5.1重定向到特定的选项卡

var hash = location.hash.replace(/^#/, '');
if (hash) {
var someVarName = $('.nav-tabs a[href="#' + hash + '"]');
var tab = new bootstrap.Tab(someVarName);
tab.show();
}

更改页面重新加载的散列

$('.nav-tabs a').on('shown.bs.tab', function (e) {
  window.location.hash = e.target.hash;
  window.scrollTo(0, 0);
})

这是dubbe解决方案的一个改进实现，防止滚动。

// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
    $('.nav-tabs a[href="#'+url.split('#')[1]+'"]').tab('show') ;
} 

// With HTML5 history API, we can easily prevent scrolling!
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    if(history.pushState) {
        history.pushState(null, null, e.target.hash); 
    } else {
        window.location.hash = e.target.hash; //Polyfill for old browsers
    }
})

更新

对于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>

虽然提供的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>

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

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