Question

I’m using the jQuery UI tabs widget to style my page:

<div id="tabs">
    <ul>
        <li><a href="#tab-1">Tab 1</a></li>
        <li><a href="#tab-2">Tab 2</a></li>
    </ul>

    <div id="tab-1">
       ...
    </div>

    <div id="tab-2">
       ...
    </div>
</div>

<script type="text/javascript">
    $(function() {
        $('#tabs').tabs();
    });
</script>

The problem I have is when I first load the page for a brief moment, I see the page unstyled before the jquery tabs function has had a chance to run. What i mean is for less than a second I see an unordered list with links for Tab 1, Tab 2, etc.

Is there a way to get rid of this delay? Should I add the classes to my markup that jQuery UI ends up adding in order to get rid of this?

Answer 1

you could hide your tabs by default and display them after you called the tabs function,

in your HTML:

<div id="tabs" style="visibility:hidden;">

in your javascript code

 $(function() {
    $('#tabs').tabs().show();
});