Twitter Bootstrap 选项卡:在页面重新加载或超链接时-前端问题

Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink(Twitter Bootstrap 选项卡:在页面重新加载或超链接时转到特定选项卡)

本文介绍了Twitter Bootstrap 选项卡:在页面重新加载或超链接时转到特定选项卡的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在开发一个网页，其中我使用 Twitter 的 Bootstrap 框架及其引导标签 JS.除了一些小问题外，它工作得很好，其中一个是我不知道如何从外部链接直接转到特定选项卡.例如:

I'm developing a web page in which I'm using Twitter's Bootstrap Framework and their Bootstrap Tabs JS. It works great except for a few minor issues, one of which is I do not know how go directly to a specific tab from an external link. For example:

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

当点击来自外部页面的链接时，应该分别转到主页选项卡和备注选项卡

should go to the Home tab and the Notes tab respectively when clicked on the links from an external page

推荐答案

这是我的解决方案，可能有点晚了.但它也许可以帮助其他人:

Here is my solution to the problem, a bit late perhaps. But it could maybe help others:

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

这篇关于Twitter Bootstrap 选项卡:在页面重新加载或超链接时转到特定选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！