title: Link to specific tab Bootstrap
body: <p>I'm developing a site with Django Framework and I'm trying to create a way for when a user access a link like <a href="http://www.example.com/site/#users_rating">http://www.example.com/site/#users_rating</a> it opens a specific tab in the page.</p>
  
  <p>I tried the following code that I found on the Internet (I'm new in JavaScript/JQuery), it isn't working:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(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;
        });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>My template uses BootStrap 3, here is the HTML code (with some Django tags):</p>
  
  <pre><code>&lt;div class="col-md-12" style="margin: 0 auto;"&gt;
          &lt;section class="panel"&gt;
              &lt;header class="panel-heading tab-bg-dark-navy-blue"&gt;
                  &lt;ul class="nav nav-tabs nav-justified "&gt;
                      &lt;li class="active"&gt;
                          &lt;a data-toggle="tab" href="#overview"&gt;
                              {% trans "Overview" %}
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class=""&gt;
                          &lt;a data-toggle="tab" href="#timeline"&gt;
                              {% trans "Timeline" %}
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class=""&gt;
                          &lt;a data-toggle="tab" href="#users_rating"&gt;
                              {% trans "Users Ratings" %} ({{ ptc.userrating.count }})
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class=""&gt;
                          &lt;a data-toggle="tab" href="#rating"&gt;
                              {% trans "Our Rating" %}
                          &lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/header&gt;
              &lt;div class="panel-body"&gt;
                  &lt;div class="tab-content tasi-tab"&gt;
  
  
                      &lt;!-- Overview Tab-Pane --&gt;
                      &lt;div id="overview" class="tab-pane active"&gt;
                          {% include 'overview.html' %}
                      &lt;/div&gt;
  
                      &lt;!-- Timeline Tab-Pane --&gt;
  
                      &lt;div id="timeline" class="tab-pane"&gt;
                          {% include 'timeline.html' %}
                      &lt;/div&gt;
  
                      &lt;!-- User Rating Tab-Pane --&gt;
  
                      &lt;div id="users_rating" class="tab-pane"&gt;
                          {% include 'users_rating.html' %}
                      &lt;/div&gt;
  
                      &lt;!-- Our Rating Tab-Pane --&gt;
  
                      &lt;div id="rating" class="tab-pane"&gt;
                          {% include 'rating.html' %}
                      &lt;/div&gt;
  
  
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/section&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>How can I open an specific tab according to an URL in my site?</p>