从同一页面上的URL链接到特定的Twitter Bootstrap选项卡

Question

我是javascript新手，我想知道如何实现此问题的答案？

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

我想在标签所位于的同一页面上使用此代码。

  <script type="text/javascript">
    // 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;
    })
  </script>

我应该在包含标签的页面内的哪个位置插入它。

再次，很抱歉成为这样的菜鸟。

Answer 1

Bootstrap 3解决方案：

<script type="text/javascript">
$(function() {
  // 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
  $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
    window.location.hash = e.target.hash;
  });
});
</script>

Answer 2

尝试将代码包装在$(document).ready()函数中

$(document).ready(function() {
 //your code here...
});

您上面的内容将无法正常运行，因为DOM在运行时将无法准备就绪。 使用$(document).ready()函数将延迟执行，直到dom已加载。 它几乎可以在包含选项卡的页面中的任何位置。 有些人认为它应该放在head部分，有些人认为它应该放在结尾部分。 但是，请阅读此处以获取有关以下内容的更深入的答案： 我将$（document）.ready（）放在哪里？

请参阅： http ://docs.jquery.com/Tutorials: Introducing_ $（document）.ready（）