Question

I have a page that is using Jquery tabs. The tabs determine not only what I want to show in the tab content area, but also outside of the tabs div as well.

The behavior that I want is, when user selects a tab, reload the whole page with new parameters in the url. (I currently do this by tacking string to location.href, thereby forcing the page to reload.

select: function(event, ui) {
    // ... determine new_url
    location.href = new_url;
}

And when the page is reloaded, I want the right tab to be active/selected, and I try to do that by detecting parameter for the tab.

create: function(event, ui) {
   // ... figure out which tab should be selected
   $('.tabs').tabs('select', tab_index);
}

I notice that this forces the browser in unending cycle of create-tabs, select-tab, reload, create-tabs, select-tab… and so on. Is there a way to break out of this?

I realize that JQuery tabs are not for this kind of work but help would be greatly appreciated!! This is my first time trying JQuery tabs.

Some extra notes:
– I am using Rails for some logic
– I attempted to ‘ui-state-active’ class to the tab that should be selected, that seems to be overwritten. First, first tab (index 0) is set to active, and then in the tabs create function, the tab I want to select is selected.

<li class="tab<%= " ui-state-active" if THIS_TAB_SHOULD_BE_SELECTED %>">
  <a href="#tab-<%= type.downcase %>">tab 1</a>
</li>

Answer 1

You can’t (or shouldn’t) mix tabs that reload page every time the user changes tab with ones that just show/hide some content. I’d recommend sticking with one of the two methods. If you want the whle page to change, either show/hide both tabs and that other content, or ajax the new content and replace the old with the new. Alternately, you could do something like the following:
HTML:

<div class="tabs">
  <span class="tab-head active">Tab 1</span>
  <div class="tab-content active">Lorem ipsum...</div>
  <span class="tab-head">Tab 2</span>
  <div class="tab-content">Lorem ipsum...</div>
  <span class="tab-head">Tab 2</span>
  <div class="tab-content">Lorem ipsum...</div>
</div>

CSS:

.tabs {overflow: auto;}
.tab-head {display: inline-block; float:left;}
.tab-content {display:none;}
.tab-content-active {display:block;}

JS:

$(".tabs .tab-head").click(function(){
    $(".tab-content,.tab-head",$(this).parent()).removeClass("active");
    $(this).addClass("active");
    $(this).next(".tab-content").addClass("active");
});

That’s roughly what I made for another site a few months ago.

Edit: I’m currently working on a way to assign initial tab positions to every single tabber by passing that data in the fragment_id part of the URL, like this: page.com/path/page.php?foo=bar&baz=quux#tabs=0:1,2:6;, where #tabs=0:1,2:6; is the important part. I’d have an onload handler parse that to show the right tabs form the start and some JS that looks for links that point to the same page with different tab information.