1

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

Gurkha
  • 1,104
  • 4
  • 20
  • 37
  • 1
    You would need to store the tab number with localStorage and then set that tab as active on document ready – juvian Oct 07 '14 at 19:26
  • You probably need to set active:false and collapsible to true http://api.jqueryui.com/tabs/#option-active – rach Oct 07 '14 at 19:29
  • I had the same need and ended up storing the current tab in localStorage. – sebnukem Oct 07 '14 at 19:33
  • 1
    @user1848739 collapsible:true collapses/hides all the tabs which is not what i want.thank you though. – Gurkha Oct 07 '14 at 19:41
  • @juvian would you mind explaining what local storage is? Do i need to declare it somewhere? – Gurkha Oct 07 '14 at 19:43
  • localStorage persists key-value pairs, similar to cookies. You can read a simple explanation in http://www.w3schools.com/html/html5_webstorage.asp and a more complex on here: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage#localStorage – juvian Oct 07 '14 at 19:49

1 Answers1

4

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
    }
});
juvian
  • 15,875
  • 2
  • 37
  • 38
  • 1
    thanks for ur help but, after implementing ur process, it still takes me back to the default tab(which is the first one, index 0) on refresh. – Gurkha Oct 07 '14 at 19:52
  • 1
    Works for me: http://jsfiddle.net/ecorLfjz/ , try going to second tab and click run again – juvian Oct 07 '14 at 19:55
  • 1
    thank you for the example, but the query version on the example is 1.9.2 whereas mine is 1.10.4 will that make any difference?? is it backwards compatible?? – Gurkha Oct 07 '14 at 19:59
  • Should make no difference, unless browser does not support localStorage or you are using an older other jquery ui – juvian Oct 07 '14 at 20:01