UI TABS - URL

by bizamajig

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/cupertino/jquery-ui.css">
<div id="tabs">
    <ul>
        <li><a href='#c' data-target-url="/abc.asp" data-asyncio="false">TabGroup1</a></li> 
        <li><a href='#c' data-target-url="/xyz.asp" data-asyncio="false">TabGroup2</a></li>                  </ul>
    <div id='c'>
        <a href='11111111111111.html'>11111111111111.html</a>
        <a href='1a1a1a1a1a.html'>1a1a1a1a1a.html</a>
    </div>
</div>

JavaScript

$('#tabs').tabs();
$( "#tabs" ).bind( "tabsselect", function(event, ui) {
    /*Here we have:
    ui.options // options used to intialize this widget
    ui.tab // anchor element of the selected (clicked) tab
    ui.panel // element, that contains the contents of the selected (clicked) tab
    ui.index // zero-based index of the selected (clicked) tab 

SO, in your case you  need to set the window location to the anchor element href of the first one in the selected tab.
    */

    var $tab = $( ui.tab );
    var target_url = $tab.attr( 'data-target-url' );          
    var asyncio = $tab.attr( 'data-asyncio' );    

    if ( ( target_url !== 'undefined' ) && ( asyncio !== 'true' ) ) {
//
//  Remove first character from string
//
//  $mylabel.text( $mylabel.text().replace( '#', '' ) );
    target_url.substring(1, target_url.length)
    location.href = target_url + '?selected_tab=' + ui.index;
    return false;
    }
});