javascript - Linking to specific twitter bootstrap tabs from URL on same page - Stack Overflow

admin管理员组

文章数量:1414880

I'm a javascript noob and I'm wondering how do I implement the answer to this question?

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

I want to use this code on the same page that the tabs are located....

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

Where inside the page containing the tabs should I plugg this in.

Again, so sorry for being such a noob.

I'm a javascript noob and I'm wondering how do I implement the answer to this question?

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

I want to use this code on the same page that the tabs are located....

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

Where inside the page containing the tabs should I plugg this in.

Again, so sorry for being such a noob.

• javascript
• twitter-bootstrap

Share Improve this question Follow edited May 23, 2017 at 11:52 CommunityBot 111 silver badge asked Mar 13, 2013 at 0:05 JessiJessi 82111 gold badge1414 silver badges2727 bronze badges 1

• If you want to simply show a tab form a link on the same page, you don't need to use the approach do this, instead use the script see this other answer of mine, with a working jsFiddle example. – Marijn Commented Mar 13, 2013 at 7:39

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Bootstrap 3 solution:

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

Try wrapping the code in the $(document).ready() function

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

What you have above won't work as the DOM won't be ready when it runs. Using the $(document).ready() function will delay execution until the dom has loaded. It can go pretty much anywhere in the page containing the tabs. Some people think it should go within the head section, some think it should go at the end. But read here for more in-depth answers on that: Where do I put the $(document).ready()?

See: http://docs.jquery./Tutorials:Introducing_$(document).ready()

本文标签： javascriptLinking to specific twitter bootstrap tabs from URL on same pageStack Overflow