Set Tab as a Current tab on Page Load Using Cookie

 

Problem – when we create tabs in html using ul and li. generally what happen if we click on any tab we can show or hide div of html,but problem arrives when  we are on third or second tab.if we reload page then we can not set third or second tab as current tab.

Solution – we can set second,third tab as current tab using cookie(assume you are loading jquery)

<script>

function getCookie(cname){
     var name = cname + "=";
     var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++)
   {
      var c = ca[i].trim();
        if (c.indexOf(name)==0) return c.substring(name.length,c.length);
    }
    return "";
}
var x = getCookie("tab");

$(document).ready(function(){

     if(x == 'tab_one'){

         /* your code */

     }else if (x == 'tab_two'){

        /* your code */

     }else if(x == 'tab_three'){

         /* your code */

     }
});

function div_select(obj){

var val = obj;

    if(val == 1){
        document.cookie="tab=tab_one";
    }else if(val == 2){
       document.cookie="tab=tab_two";
     }else if(val == 3){
        document.cookie="tab=tab_three";
    }

}

</script

html –

<ul class="tab">
<li class="" onclick="return div_select(1);">one</li>
<li class="" onclick="return div_select(2);">two</li>
<li class="" onclick="return div_select(3);">three</li>
</ul>