javascript - jQuery tabs flash (FOUC) when page loads - Stack Overflow

admin管理员组

文章数量:1410689

I have the following website:

/

I am using JQuery UI Tabs for my menu. When you load the page, there is a flash of the content in the tabs.

I've tried everything from the ui-tabs-hide trick to hiding things in Javascript. Is there a trick I'm missing? What should I do?

Thank you for your help!

I have the following website:

http://cassidoo.public.iastate.edu/

I am using JQuery UI Tabs for my menu. When you load the page, there is a flash of the content in the tabs.

I've tried everything from the ui-tabs-hide trick to hiding things in Javascript. Is there a trick I'm missing? What should I do?

Thank you for your help!

• javascript
• jquery
• jquery-ui
• jquery-ui-tabs
• jquery-tabs

Share Follow asked Jan 7, 2013 at 1:56 CassidyCassidy 3,36555 gold badges4141 silver badges8080 bronze badges 2

• I think you should call what you have in tabcontrol.js at document ready state. – mamdouh alramadan Commented Jan 7, 2013 at 2:04
• try z index = -1 on the tabs with css (not js) - see if it works – sajawikio Commented Jan 7, 2013 at 3:07

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

I ran into a similar situation and here's how I addressed the issue:

(1.) define a css class called "hide" and set it to "display:none"

(2.) in each div with class "contentpanel", add "hide" right next to it in your markup. this will ensure the page loads with display
none, rather than waiting for javascript to handle it.

(3.) when you create the jquery.ui.tabs selector, use the "tabscreate" method to remove the class "hide" from your content panels. so your selector would look something like this:

  //define tabs instance 
   $( "#tabs" ).tabs({

        create: function( event, ui ) {
           //when tabs are created, remove your class .hide from each content panel
           //so jquery tabs will control when panel content will surface
           $(your contentpanel selector).removeClass(hide);
        }
     //whatever else you need to do
     ....
     ...
     ..
    }); 

To find out more about jQuery UI tabs internal methods, read this:

http://api.jqueryui./tabs/

and read

create( event, ui )

Hope this helps.

Chris

本文标签： javascriptjQuery tabs flash (FOUC) when page loadsStack Overflow