Twitter Bootstrap选项卡：转到页面从新加载或超连接上的“特定”选项卡

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

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

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

---

#1楼

更新

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

---

这基于@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>

---

#2楼

$(function(){
  var hash = window.location.hash;
  hash && $('ul.nav a[href="' + hash + '"]').tab('show');
});

来自http://github.com/twitter/bootstrap/issues/2415#issuecomment-4450768的这段代码很是适合我。

---

#3楼

我建议您使用Bootstrap做者在GitHub上的问题跟踪器上提供的代码：

var hash = location.hash
  , hashPieces = hash.split('?')
  , activeTab = $('[href=' + hashPieces[0] + ']');
activeTab && activeTab.tab('show');

您能够在问题的连接上找到有关他们为何不选择支持的更多信息。

---

#4楼

该代码根据#hash选择正确的选项卡，并在单击选项卡时添加正确的#hash。 （这使用jQuery）

在Coffeescript中：

$(document).ready ->
    if location.hash != ''
        $('a[href="'+location.hash+'"]').tab('show')

    $('a[data-toggle="tab"]').on 'shown', (e) ->
        location.hash = $(e.target).attr('href').substr(1)

或在JS中：

$(document).ready(function() {
    if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show');
    return $('a[data-toggle="tab"]').on('shown', function(e) {
      return location.hash = $(e.target).attr('href').substr(1);
    });
});

---

#5楼

这是我所作的，很是简单，而且只要您的标签连接具备与之关联的ID，您就能够获取href属性并将其传递给显示标签内容的函数：

<script type="text/javascript">
        jQuery(document).ready(function() {
            var hash = document.location.hash;
            var prefix = "tab_";
            if (hash) {
                var tab = jQuery(hash.replace(prefix,"")).attr('href');
                jQuery('.nav-tabs a[href='+tab+']').tab('show');
            }
        });
        </script>

而后，您能够在网址中添加哈希，例如：＃tab_tab1，将从哈希自己中删除“ tab_”部分，以便将导航标签（tabid1）中实际标签连接的ID放在此以后，所以网址应相似于：www.mydomain.com/index.php#tab_tabid1。

这对我来讲很完美，但愿对其余人有帮助:-)