title: How can I update url with hashchange within tabs by using Javascript
body: <p>I would like to get my page to display the current tab in the URL, please keep in mind I'm still learning, so my coding skills are not the greatest. I would normally use PHP for this, but I've been asked to stick to Javascript/JQuery.</p>
  
  <p>So far, I've managed to get my tabs to display content dynamically within a div by using a simple script.</p>
  
  <p>This is my index bit:</p>
  
  <pre><code>&lt;div class="row"&gt;
        &lt;div class="col-md-3 col-lg-3"&gt;
          &lt;div class="custom-left-tabs -text--uppercase"&gt;
            &lt;div class="custom-left-tabs-btn hidden-lg hidden-md"&gt;
              &lt;a href="#lefttabs" aria-expanded="false" data-toggle="collapse"&gt;Menu&lt;i class="fa fa-angle-down"&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;/div&gt;
            &lt;ul id="lefttabs" class="list-unstyled collapse"&gt;
              &lt;li class="sub-heading"&gt;Getting Started&lt;/li&gt;
              &lt;li&gt;&lt;a data-toggle="tab" href="pages/first.html"&gt;First&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a data-toggle="tab" href="pages/second.html"&gt;Second&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="content" class="tab-content col-lg-9 -bg--white -padding--m"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>This is my script:</p>
  
  <pre><code>$(document).ready(function(){
    $("#content").load("pages/first.html");
  });
  
  $("li").find('a').click(function(){
    var page = $(this).attr('href');
    $("#content").load(page);
    return false;
  });
  </code></pre>
  
  <p>Ideally I would prefer not having all content chucked into one page. I've checked many similar questions/videos, but I can't really find the missing bit.</p>
  
  <p>My question is really how should I write a script that does this extra bit of displaying the current tab on the URL.</p>