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.
This is complete final solution I found, which WORKS (crossbrowser)!
Creates tabs
Select the tab which must be active for the current URL we have
The below code MUST be after we started tabs and selected which one is now active, otherwise we will recieve infinite url-reloading!
So, when I moved tab selection based on URL to the begining of code, this solved all the issues and make solution this simple!