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

更新

对于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 to enable link to tab
var hash = location.hash.replace(/^#/, '');  // ^ means starting, meaning only match the first hash
if (hash) {
    $('.nav-tabs a[href="#' + hash + '"]').tab('show');
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
})

我不得不修改一些比特这为我工作。 我使用Bootstrap 3和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);
});

只需在页面上插入以下代码:

$（function（）{ var hash = window.location.hash; hash && $（'ul.nav a[href=“' + hash + '”]'）.tab（'show'）; $（'.nav-tabs a'）.click（function （e） { $（this）.tab（'show'）; var scrollm = $（'body'）.scrollTop（）; window.location.hash = this.hash; $（'html，body'）.scrollTop（scrollm）; }); });

我知道这个线程非常旧，但我将在这里留下我自己的实现:

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

注意，我使用了一个导航类前缀来导航链接。