title: Bootstrap 4 Tabs Not Linking
body: <p>I am wondering why I can't get the bootstrap tabs to correspond to links. I've tried a bunch of solutions on stackoverflow, but the code structure all looks different than mine because I presume they're not bootstrap 4.</p>
  
  <p>Here is the html from <a href="https://v4-alpha.getbootstrap.com/components/navs/#using-data-attributes" rel="nofollow noreferrer" title="Bootstrap Tabs Using Data Attributes">Tabs Using Data Attributes</a></p>
  
  <pre><code>&lt;!-- Nav tabs --&gt;
  &lt;ul class="nav nav-tabs" role="tablist"&gt;
      &lt;li class="nav-item"&gt;
          &lt;a class="nav-link active" data-toggle="tab" href="#home" role="tab"&gt;Home&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" data-toggle="tab" href="#profile" role="tab"&gt;Profile&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" data-toggle="tab" href="#messages" role="tab"&gt;Messages&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" data-toggle="tab" href="#settings" role="tab"&gt;Settings&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;!-- Tab panes --&gt;
  &lt;div class="tab-content"&gt;
      &lt;div class="tab-pane active" id="home" role="tabpanel"&gt;...&lt;/div&gt;
      &lt;div class="tab-pane" id="profile" role="tabpanel"&gt;...&lt;/div&gt;
      &lt;div class="tab-pane" id="messages" role="tabpanel"&gt;...&lt;/div&gt;
      &lt;div class="tab-pane" id="settings" role="tabpanel"&gt;...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Using this JS from another post does actually change the link to include #page when clicking on tabs, but if i enter that address, it always goes back to the homepage:</p>
  
  <pre><code>// Javascript to enable link to tab
  var url = document.location.toString();
  if (url.match('#')) {
      $('.nav-tabs a[href="#' + url.split('#')[1] + '-tab"]').tab('show');
  } //add a suffix
  
  // Change hash for page-reload
  $('.nav-tabs a').on('shown.bs.tab', function (e) {
      window.location.hash = e.target.hash;
  })
  </code></pre>
  
  <p>I do apologize that this question has been asked in different iterations other places, but I have not seen the base question (i.e., how to do this with the starter code from bootstrap) answered.</p>