title: Javascript Tabs - How to add hashtags on URL?
body: <p>My Tabs works fine, but I need to have a separate function which directs with a URL to the tab, so I can have a separate link for each tab.</p>
  
  <p>How Can I achieve that? </p>
  
  <blockquote>
    <p>url.com/#tab1</p>
    
    <p>url.com/#tab2</p>
  </blockquote>
  
  <p>I tried many ways but I keep getting undefined hashtag. I'd like advice please, I put together a demo, which shows the full working experience.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var boxLink = $( '.but' );
  var box = $( '.tab' );
  
  boxLink.click( function() {
   $('#but1').removeClass('active');
   
      var boxID = $(this).attr("data-target");
      var currentbox = $('.tab:not(.is-hidden)');
      var targetBox = $('.tab#' + boxID);
      
      if (!$(this).hasClass('active'))    {
          boxLink.removeClass('active');
          $(this).addClass('active');
  
          TweenMax.to( currentbox, 0.2, {ease:Power4.easeOut, className: '-=visible', autoAlpha: 0,  onComplete: boxIn, onCompleteParams: [targetBox] });
      }
      
      return false;
  });
  
  var boxIn = function( targetBox ) {
      box.addClass( 'is-hidden' );
      targetBox.removeClass( 'is-hidden' );
      
      TweenMax.to( targetBox, 0.2, {autoAlpha: 1,className: '+=visible', ease:Power4.easeIn});
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color:black;
   }
  #tab01 {
  background: white;
  }
  
  #tab02 {
  background: red;
  } 
   
  .tab {
  width:100px;
  height:100px;
  font-size:30px;
  line-height:100px;
  text-align:center;
  }
  .is-hidden {
    display: none;
    opacity:0;
    visibility:hidden;
  } 
  
  button {
    cursor:pointer;
    padding: 5px;
    margin-top: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="tab" id="tab01"&gt;one&lt;/div&gt;
  &lt;div class="tab is-hidden" id="tab02"&gt;two&lt;/div&gt;
  
  &lt;button  class="but active" id="but1" data-target="tab01"&gt;slide 1&lt;/button&gt;
  &lt;button  class="but" id="but2" data-target="tab02"&gt;slide 2&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>