从同一页面上的 URL 链接到特定的 Twitter 引导选项卡答案

【问题标题】：Linking to specific twitter bootstrap tabs from URL on same page从同一页面上的 URL 链接到特定的 Twitter 引导选项卡
【发布时间】：2013-02-28 18:10:21
【问题描述】：

我是一个 javascript 菜鸟，我想知道如何实现这个问题的答案？

Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink

我想在选项卡所在的同一页面上使用此代码......

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

我应该将它插入到包含选项卡的页面的哪个位置。

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

【问题讨论】：

如果你想简单地在 same 页面上显示一个标签形式的链接，你不需要使用这种方法，而是使用脚本见@987654322 @，带有一个有效的 jsFiddle 示例。

标签： javascript twitter-bootstrap

【解决方案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>

【讨论】：

太棒了！一个问题：当我用“#”粘贴网址时，页面会转到#starts 的位置。我怎样才能让页面进入顶部？我可以看到 # 对维基百科页面中的部分很有用，但我们只是使用 3 个水平选项卡来显示不同的内容
我很愚蠢。我才意识到我误解了这个问题。我正在寻找一种解决方案，当您单击选项卡时只需更改 url
未捕获错误：语法错误，无法识别的表达式：.nav-tabs a[href=#/mytab]

【解决方案2】：

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

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

上面的内容将不起作用，因为 DOM 在运行时不会准备好。使用 $(document).ready() 函数将延迟执行，直到 dom 加载。它几乎可以在包含选项卡的页面中的任何位置。有些人认为它应该放在head 部分内，有些人认为它应该放在最后。但请阅读此处以获得更深入的答案：Where do I put the $(document).ready()?

参见：http://docs.jquery.com/Tutorials:Introducing_$(document).ready()

【讨论】：