title: Bootstrap not switching tab by url
body: <p>I am creating a form that will allow users to select what email service they want to use.</p>
  
  <p>However when I am using bootstrap, the links reload the page but do not switch the tab that I need it to.</p>
  
  <p>Example</p>
  
  <p>If I load the page, and click the link to "GMail" it reloads the page but stays on the default tab.</p>
  
  <p>Here is my code</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Email Setup&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="assets/stylesheets/email_setup.css"&gt;
  &lt;/head&gt;
  &lt;script type="text/javascript"&gt;
      // Javascript to enable link to tab
          console.log("ASDF");
  var url = document.location.toString();
  if (url.match('#')) {
     $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
  }
  
   $('.nav-tabs a').on('shown.bs.tab', function(e) {
      window.location.hash = e.target.hash;
    });
  
  &lt;/script&gt;
  &lt;body&gt;
  &lt;div id="email_setup_table" class="container"&gt;
      &lt;ul class="nav nav-tabs"&gt;
          &lt;li class="active"&gt;
              &lt;a href="#tab-default" data-toggle="tab"&gt;Select&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#tab-gmailTab" data-toggle="tab"&gt;Gmail&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#tab-yahooTab" data-toggle="tab"&gt;Yahoo&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#tab-outlookTab" data-toggle="tab"&gt;Outlook&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#tab-otherTab" data-toggle="tab"&gt;Other&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;div class="tab-content"&gt;
          &lt;div class="tab-pane active" id="tab-default"&gt;
              &lt;h3&gt;Select Email Provider&lt;/h3&gt;
              &lt;a href="/email_bot/front_end/email_setup.html#tab-gmailTab"&gt;GMail&lt;/a&gt;
              &lt;a href="/email_bot/front_end/email_setup.html#tab-yahooTab"&gt;Yahoo&lt;/a&gt;
              &lt;a href="/email_bot/front_end/email_setup.html#tab-outlookTab"&gt;Outlook&lt;/a&gt;
              &lt;a href="/email_bot/front_end/email_setup.html#tab-otherTab"&gt;Manual Setup&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="tab-pane" id="tab-gmailTab"&gt;
              &lt;h3&gt;Gmail Setup&lt;/h3&gt;
              &lt;form&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="exampleInputEmail1"&gt;Email address&lt;/label&gt;
                      &lt;input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                             placeholder="Enter email"&gt;
                      &lt;small id="emailHelp" class="form-text text-muted"&gt;We'll never share your email with anyone else.
                      &lt;/small&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="exampleInputPassword1"&gt;Password&lt;/label&gt;
                      &lt;input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
          &lt;div class="tab-pane" id="tab-yahooTab"&gt;
              &lt;h3&gt;Yahoo support coming soon&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="tab-pane" id="tab-outlookTab"&gt;
              &lt;h3&gt;Outlook support coming soon&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="tab-pane" id="tab-otherTab"&gt;
              &lt;h3&gt;Other support coming soon&lt;/h3&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I have no idea why it is not switching automatically and any help would be great.</p>