0

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 the second tab show up by default when the 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?

1 Answer 1

2

From the doc, use 'selected' property.

$('#tabs').tabs({ selected: 2 });
Sign up to request clarification or add additional context in comments.

1 Comment

That comment made my day! Thanks!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.