title: Jquery tabs cookie use existing script
body: <p>May be this is not so hard to do but no from JS background so hard to understand for me. I am trying to store selected tab in cookie so if page refreshed still it will display selected tab earlier.</p>
  
  <p>I am already using list grid layout for my website and also have cookie set and works fine. I am posting cookie code I am using for that as well as my tabs html and javascript too.</p>
  
  <p><strong>List/Grid Cookie JS</strong></p>
  
  <pre><code>    $(function() {
          var cc = $.cookie('list_grid');
          if (cc == 'g') {
              $('#listgrid').addClass('grid');
              $('#grid').addClass('current');            
          } else {
              $('#listgrid').removeClass('grid');
              $('#list').addClass('current');
          }
      });
  
  $(document).ready(function() {
  
      $('#grid').click(function() {
          $(".current").removeClass("current");
          $(this).addClass("current");
  
          $('#listgrid').fadeOut(500, function() {
              $(this).addClass('grid').fadeIn(500);
              $.cookie('list_grid', 'g');
          });
          return false;
      });
  
      $('#list').click(function() {
          $(".current").removeClass("current");
          $(this).addClass("current");
  
          $('#listgrid').fadeOut(500, function() {
              $(this).removeClass('grid').fadeIn(500);
              $.cookie('list_grid', null);
          });
          return false;
      });
  
  });
  </code></pre>
  
  <p><strong>My Tabs HTML</strong>
      
          <li>Tab 1</li>
          <li>Tab 2</li>
          <li>Tab 3</li>
      </p>
  
  <pre><code>&lt;div class="tabs"&gt;
  
      &lt;div id="tab1" class="tab"&gt;
      &lt;/div&gt;
  
      &lt;div id="tab2" class="tab"&gt;
      &lt;/div&gt;
  
      &lt;div id="tab3" class="tab"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Tabs JS</strong>
      jQuery(document).ready(function () {
          //if this is not the first tab, hide it
          jQuery(".tab:not(:first)").hide();</p>
  
  <pre><code>    //to fix u know who
      jQuery(".tab:first").show();
  
      //when we click one of the tabs
      jQuery(".htabs a").click(function () {
  
          $(".current").removeClass("current");
          $(this).addClass("current");
  
          //get the ID of the element we need to show
          stringref = jQuery(this).attr("href").split('#')[1];
          //hide the tabs that doesn't match the ID
          jQuery('.tab:not(#' + stringref + ')').hide();
          //fix
          if (jQuery.browser.msie &amp;&amp; jQuery.browser.version.substr(0, 3) == "6.0") {
              jQuery('.tab#' + stringref).show();
          } else
          //display our tab fading it in
          jQuery('.tab#' + stringref).fadeIn();
          //stay with me
          return false;
  
      });
  
  });
  </code></pre>
  
  <p>So can anyone please help me to do this.</p>