Question

I use JQueryUI TABS plugin.

There is my tabs structure.

<div id="tabs">
  <ul>
    <li><a href='#tabs-1'>TabGroup1</a></li>
    <li><a href='#tabs-2'>TabGroup2</a></li>            
  </ul>
  <div id='tabs-1'>
    <a href='tab1_link1.html'>TabGroup1-link1</a>
    <a href='tab1_link2.html'>TabGroup1-link2</a>
  </div>
  <div id='tabs-2'>
    <a href='tab2_link1.html'>TabGroup2-link1</a>
    <a href='tab2_link2.html'>TabGroup2-link2</a>
  </div>
</div>

I use such code to select and load first link in tab, when tab is selected.
It works itself.

$(function() {
    $( "#tabs" ).tabs();

        // Activate first link on tab
    $( "#tabs" ).bind( "tabsselect", function(event, ui) {
     window.location.href = $(ui.panel).find('a:first').attr('href');
   });  
});

BUT in my task addition code for selecting tab by URL parameters strongly nessesary.
So if visitor opened link from second tab-group, second tab must be showed opened, not default first one.*

I have working code which show correct tab when link from this tab is loaded (no AJAX or such, just ussual links). $URL['part'] is variable I recieve from my URL in engine, this works fine separately.

<?php if(@$URL['part']=='part2'){
    echo '<script>$(function() { $("#tabs").tabs("select","#tabs-2"); });</script>';    
} ?>

BUT when I use both these code-blocks it cause page repeatedly infinite reload 🙁

UPDATED:

Notice, that both of blocks of code use SELECT event, that why the looping occurs.

UPDATED2:

I suppose, if use ONCLICK for loading link when tab is selected, and SELECT on activation tab due to URL settings, it can solve the problem. But I don’t know how to write this in code.

Answer 1

This is complete final solution I found, which WORKS (crossbrowser)!

Creates tabs

$(function() {
    $( "#tabs" ).tabs();
});

Select the tab which must be active for the current URL we have

<?php 
if(@$URL['part']=='part1'){
    echo '$(function() { $("#tabs").tabs("select","#tabs-1"); });'; 
} 
if(@$URL['part']=='part2'){
    echo '$(function() { $("#tabs").tabs("select","#tabs-2"); });'; 
} 
?>

The below code MUST be after we started tabs and selected which one is now active, otherwise we will recieve infinite url-reloading!

$(function() {
    $('#tabs').tabs({
        select: function(event, ui) {
            window.location.href = $(ui.panel).find('a:first').attr('href');
        }
    });
});

So, when I moved tab selection based on URL to the begining of code, this solved all the issues and make solution this simple!