Bootstrap如何直接链接到特定选项卡中的锚标签

Question

I'm using a bootstrap v3 and want to make a link to an anchor tag within a specific tab. I found a way to link to a specific tab like this way:

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

Below is the code I used to get this work.

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

However, I want to jump to an anchor tag within this tab, so I made a link like below but it won't work.

faq.html#tab2#topic2-3

I believe 2 hashtag is making a problem? Is there a way to make a direct link to the anchor tag in a specific tab? Maybe like this way?

faq.html?tab=2#topic2-3

Thank you for the help.

Answer 1

In order to use anchors, the fact that you are using bootstrap doesn't matter. You need to properly give the name to the anchor/title that you want to use. In order to do that you can do

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

Now, when you go to

/myPage.html#tab2

you will get to where you want. Read here for more info: http://help.typepad.com/anchor-tags.html

Before you reach the anchor, if you want to go to a specific tab, you should find it by using a get request, which is as you stated, this way you aren't trying to find two anchors, which doesn't make sense to the browser.