JSFiddle - React, Tailwind, and code Playground

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='#tabs-1' data-url="/abc.asp" data-ajax="false">TabGroup1</a></li> 
        <li><a href='#tabs-2' data-url="/xyz.asp" data-ajax="false">TabGroup2</a></li>                  </ul>
    <div id='tabs-1'>
        <a href='11111111111111.html'>11111111111111.html</a>
        <a href='1a1a1a1a1a.html'>1a1a1a1a1a.html</a>
    </div>
    <div id='tabs-2'>
        <a href='22222222222222.html'>22222222222222.html</a>
        <a href='2a2a2a2a2a.html'>2a2a2a2a2a.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 url = $tab.attr( 'data-url' );          
                var ajax = $tab.attr( 'data-ajax' );    
                alert(url);

                if ( ( url !== 'undefined' ) && ( ajax !== 'false' ) ) {
                    alert(url);
                    location.href = url + '?tab=' + ui.index;
                    return false;
                }
                return true;

    var myhref= $(ui.panel).find('a:first').attr('href');
    alert(myhref);
    window.location.href = myhref;
});