title: Jquery Tabs Add/Toggle classes based on URL
body: <p>I have some tabs set up with jQuery, but I would like to add the capability to change tabs based on URL. Ideally, once the URL is followed by the id/data-attribute, the browser scrolls to the appropriate section and the tab gets open. </p>
  
  <pre><code>        $(document).ready(function(){
  
  $('.gdlr-session-item-head-info').click(function(){
      if( $(this).hasClass('gdlr-active') ) return;
      $(".gdlr-session-item-head-info").removeClass('gdlr-active');
  
  
      $('html, body').animate({
          scrollTop: $(".gdlr-tab-session-item").offset().top-200
      }, 1000);
  
      var selected_tab = $(this).attr('data-tab');
      var current_day = $(this).attr('current-day');
      $(".currentDay-"+current_day).addClass('gdlr-active');
  
      $('.gdlr-session-item-head').siblings('.gdlr-session-item-tab-content').hide();
      $('.gdlr-session-item-head').siblings('.' + selected_tab).fadeIn();
  });
  </code></pre>
  
  <p>}</p>
  
  <p>HMTL</p>
  
  <pre><code>&lt;div class="session-item-wrapper" id="agendaroduct" style="margin-bottom: 10px;"&gt;
  &lt;div class="gdlr-session-item gdlr-tab-session-item gdlr-item"&gt;
     &lt;div class="gdlr-session-item-head"&gt;
        &lt;a href="agenda/#currentDay-1"&gt;
           &lt;div id="currentDay-1" class="gdlr-session-item-head-info  currentDay-0 gdlr-active" current-day="0" data-tab="gdlr-tab-1"&gt;
              &lt;div class="gdlr-session-head-day"&gt;Pre-Day&lt;/div&gt;
              &lt;div class="gdlr-session-head-date"&gt;Tue, Nov 5&lt;/div&gt;
           &lt;/div&gt;
        &lt;/a&gt;
        &lt;a href="agenda/#currentDay-2"&gt;
           &lt;div id="currentDay-2" class="gdlr-session-item-head-info currentDay-1" current-day="1" data-tab="gdlr-tab-2"&gt;
              &lt;div class="gdlr-session-head-day"&gt;Day 1&lt;/div&gt;
              &lt;div class="gdlr-session-head-date"&gt;Wed, Nov 6&lt;/div&gt;
           &lt;/div&gt;
        &lt;/a&gt;
        &lt;a href="agenda/#currentDay-3"&gt;
           &lt;div id="currentDay-3" class="gdlr-session-item-head-info  currentDay-2" current-day="2" data-tab="gdlr-tab-3"&gt;
              &lt;div class="gdlr-session-head-day"&gt;Day 2&lt;/div&gt;
              &lt;div class="gdlr-session-head-date"&gt;Thu, Nov 7&lt;/div&gt;
           &lt;/div&gt;
        &lt;/a&gt;
        &lt;div class="clear"&gt;&lt;/div&gt;
     &lt;/div&gt;
     &lt;div&gt;
        &lt;div class="clear"&gt;&lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="gdlr-session-item-tab-content gdlr-tab-1 " style="display: block;"&gt;                                                          content goes here
     &lt;/div&gt;
     &lt;div class="gdlr-session-item-tab-content gdlr-tab-2 gdlr-active" style="display: none;"&gt;                                                                                                                                                                                                                                                                    content goes here                   
     &lt;/div&gt;
     &lt;div class="gdlr-session-item-tab-content gdlr-tab-3 " style="display: none;"&gt;                   conten goes here
     &lt;/div&gt;
     &lt;div class="gdlr-session-item-head end"&gt;
        &lt;div class="gdlr-session-item-head-info  currentDay-0 gdlr-active" current-day="0" data-tab="gdlr-tab-1"&gt;
           &lt;div class="gdlr-session-head-day"&gt;Pre-Day&lt;/div&gt;
           &lt;div class="gdlr-session-head-date"&gt;Tue, Nov 5&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="gdlr-session-item-head-info currentDay-1" current-day="1" data-tab="gdlr-tab-2"&gt;
           &lt;div class="gdlr-session-head-day"&gt;Day 1&lt;/div&gt;
           &lt;div class="gdlr-session-head-date"&gt;Wed, Nov 6&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="gdlr-session-item-head-info  currentDay-2" current-day="2" data-tab="gdlr-tab-3"&gt;
           &lt;div class="gdlr-session-head-day"&gt;Day 2&lt;/div&gt;
           &lt;div class="gdlr-session-head-date"&gt;Thu, Nov 7&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="clear"&gt;&lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any help would be very much appreciate it.
  Thanks!</p>