jQuery UI tabs loading first as <ul> then as tabs

This is normal, but it shouldn't take a few seconds. How much are you doing in your jQuery ready (AKA $()) function before you call $("#whatever").tabs()? Try moving that method call to the top of your ready function.

This happens because you call $('#id').tabs() in document.ready(), which happens when the DOM is ready to be traversed^[1]. This generally means the page has been rendered, and so the <ul> is visible on the page as a regular <ul> without any tab-specific styling applied.

It's not super "clean", but a way I use to get around this is to add the ui-tabs class to the <ul> in the HTML, which causes it to get the CSS style applied immediately. The downside is that you don't have the 100% clean separation of behaviour and code, but the upside is it looks nice.

Hey I am not sure whether this is right way but I used the following hack. (I tried other answers, and they are not working for me).

First I just used following code for anchor tag:

<div id="tabs">
    <ul >
        <li style="list-style-image: none !important; list-style-type: none"><a href="#tabs-1" id="link1" ></a></li>
        <li style="list-style-image: none !important; list-style-type: none"><a href="#tabs-2" id="link2" ></a></li>
    </ul>
</div>

In Document ready function I wrote following (jQuery) code to name the Anchor tags using:

$("#link1").text('Current');
$("#link2").text('Archived');  

Like others have said, it's because jQuery doesn't render the UL as tabs until the document has loaded. I've gotten around this problem by simply hiding the tabs until they're loaded. That way you get rid of the flicker. For instance:

<ul id="tabs" style="display: none;">
...
$(document).ready(function(){
  $('#tabs').tabs();
  $('#tabs').attr('display', 'block');
});