Menu
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'?
251
removeClass('ep_s-click1'). addClass('ep_s1'); }} } }); if i use selected: 0 it will set up the first tab as active but it will now go through the if (theSelectedTab2 == 0) statement and go through adding those classes. if after the page loads i click on those tabs the script works perfect.
tabs(); $('. benefitc'). click(function () { // bind click event to link $tabs. tabs('select', 4); // switch to tab return false; });
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.
80
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
