有没有办法让BootStrap标签通过URL激活?

时间:2014-06-07 01:23:35

标签: javascript twitter-bootstrap

我正在使用BootStrap的标签(http://getbootstrap.com/javascript/#tabs)。有没有办法得到它,以便当你到example.com/#8它会带你到标记为8的标签?

当前代码:

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="MyTabs">
  <li><a href="#8" data-toggle="tab">8</a></li>
  <li><a href="#7" data-toggle="tab">7</a></li>
  <li><a href="#6" data-toggle="tab">6</a></li>
  <li><a href="#5" data-toggle="tab">5</a></li>
  <li><a href="#4" data-toggle="tab">4</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
...
</div>

我通常不会使用JS,因为我还没有学到它,但任何帮助都会很棒!

1 个答案:

答案 0 :(得分:0)

// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
    $('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
} 

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

来自:The Same Question on SO但我建议将来尝试自己的研究。我将用于查找答案的示例搜索类似于this