如何防止jQuery选项卡在刷新时默认为第一个选项卡？

Question

I am using simple jquery tabs on my page with multiple tabs which is as follows:

$("#tabs").tabs();
<s:div id="tabs">
<ul>
  <li><a href="#tabs-1"> Home</a></li>
  <li><a href="#tabs-2">Resources</a></li>
  <li><a href="#tabs-3">hello world</a></li>
</ul>

<s:div id="tabs-1">
     tab one content
</s:div>
<s:div id="tabs-2">
     tab two content
</s:div>
<s:div id="tabs-3">
   tab three content
</s:div>
</s:div>

however when I'm on any of the tabs other that 1 and hit refresh, it takes me back to the first tab. I know by default the first tab is active. And i even tried to use the following function to deactivate active tabs :

$( "#tabs" ).tabs({ active: false });

but it will still take me to the first tab even after there is no active tab. How can i prevent this from happening? I want jquery to not change tabs when i refresh the page. I did find couple of answers but none seem to help. Any help would be appreciated. thankx in advance

Answer 1

This should make the trick:

var selected=0;
if(localStorage.currentTab){
    selected=Number(localStorage.currentTab)
}else{
    localStorage.currentTab=0;
}

$("#tabs").tabs({ 
    selected: selected,
    select: function(event, ui) {
        localStorage.currentTab=ui.index
    }
});