Question

I’m using jQuery UI and the tab control on a series of pages.
It seems like, when loading a page, the tabs initially load as a simple list, then they jump to the tabstrip.

When I initially load the page I get this:

Then, after a few seconds it switches over to this (the way is should be):

Any idea why this is happening? Do I need to load the .js and/or .css files in a particular order? Or, is there a way to hide the initial list and only display the tabs once they are ‘loaded’?

Answer 1

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.