Bootstrap如何直接链接到特定标签

时间:2016-03-21 20:50:13

标签: javascript jquery html twitter-bootstrap twitter-bootstrap-3

我正在使用bootstrap v3并希望在特定选项卡中创建指向锚标记的链接。我发现了一种以这种方式链接到特定标签的方法:

http://www.example.com/faq.html#tab2

以下是我用来完成这项工作的代码。

<script type="text/javascript">
        $(function() {
          // Javascript to enable link to tab
          var hash = document.location.hash;
          if (hash) {
            console.log(hash);
            $('.nav-tabs a[href='+hash+']').tab('show');
          }

          // Change hash for page-reload
          $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
            window.location.hash = e.target.hash;
          });
        });
    </script>

但是,我想在此标签中跳转到锚标记,因此我创建了一个类似下面的链接,但它不起作用。

faq.html#tab2#topic2-3

我相信2个标签正在出问题?有没有办法直接链接到特定选项卡中的锚标记?也许是这样的?

faq.html?tab=2#topic2-3

感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

为了使用锚点,你使用bootstrap的事实并不重要。您需要正确地为要使用的锚点/标题指定名称。为了做到这一点,你可以做到

typedef

现在,当你去

<a name="tab2">Title Text</a>

你会到达你想要的地方。请阅读此处了解更多信息:http://help.typepad.com/anchor-tags.html

在你到达主播之前,如果你想去一个特定的标签,你应该通过使用get请求找到它,就像你说的那样,这样你就不会试图找到两个锚点,这不会对浏览器有意义。