Twitter Bootstrap 选项卡：在页面重新加载或超链接时转到特定选项卡

Question

我正在开发一个网页，我在其中使用 Twitter 的 Bootstrap Framework 和他们的 Bootstrap Tabs JS 。除了一些小问题外，它工作得很好，其中一个是我不知道如何从外部链接直接转到特定选项卡。例如：

<a href="facility.php#home">Home</a>
<a href="facility.php#notes">Notes</a>

单击外部页面的链接时， 应分别转到“主页”选项卡和“注释”选项卡

原文由 mraliks 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是我对这个问题的解决方案，也许有点晚了。但它也许可以帮助其他人：

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

原文由 dubbe 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

更新

对于 Bootstrap 3，将 .on('shown', ...) 更改为 .on('shown.bs.tab', ....)

---

这是基于 @dubbe 的回答和这个 SO accepted answer 。它处理 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>

原文由 flynfish 发布，翻译遵循 CC BY-SA 3.0 许可协议