tags:

views:

253

answers:

1

I am using jquery UI tabs

I have three ajax tabs like so:

<div id="tabs">
<ul>
<li><a href="linktopage1.jsp">Failed EIV Pre-Screening</a></li>
<li><a  href="linktopage2.jsp">Failed SSA Screening</a></li>
<li><a  href="linktopage3.jsp">Pending Verification</a></li>
</ul>
</div>

I would like to make second tab show up by default when page is loaded.

I tried the following code.

<script type="text/javascript">
    $(document).ready(function(){
    var $tabs = $('#tabs').tabs();
    $tabs.tabs('select', 1);
    });
</script>

Now when the page loads....code in linktopage2.jsp is executed HOWEVER, on the screen still the first tab is selected and the screen is empty. I explicitly have to click the second tab for the data to show up.

What am I doing wrong or is there something else that can be done?

+2  A: 

From the doc, use 'selected' property.

$('#tabs').tabs({ selected: 2 });
SolutionYogi
you are my amitabh bachan of the day. thanks!
That comment made my day! Thanks!
SolutionYogi