Twitter 引导选项卡：转到页面重新加载或超链接上的特定选项卡

javascript html tabs twitter-bootstrap

2022-08-29 23:35:55

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

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

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

答案 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;
})

答案 2

更新

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

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

// 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>