Linking to specific twitter bootstrap tabs from URL on same page

Question

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.

Answer 1

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>

Answer 2

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.com/Tutorials:Introducing_ $(document).ready()