jQuery schede flash (FOUC) quando pagina viene caricata

Question

Ho il seguente sito web:

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

Sto usando jQuery UI Tabs per il mio menu. Quando carichi la pagina, c'è un lampo del contenuto nelle schede.

Ho provato di tutto dal trucco ui-tabs-hide per nascondere le cose in Javascript. C'è un trucco che mi manca? Cosa dovrei fare?

Grazie per il vostro aiuto!

Answer 1

mi sono imbattuto in una situazione simile e ecco come ho affrontato la questione:

(1.) definire una classe CSS chiamato "nascondere" e impostarlo su "display: none"

(2.) in ogni div con classe "contentpanel", aggiungi "nascondi" proprio accanto a nel tuo markup. questo assicurerà che la pagina venga caricata con il display
, piuttosto che attendere che javascript lo gestisca.

(3.) quando si crea il selettore jquery.ui.tabs, utilizzare il metodo "tabscreate" per rimuovere la classe "nascondi" dai pannelli di contenuto . così il vostro selettore sarebbe simile a questa:

//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 
    .... 
    ... 
    .. 
    }); 

Per saperne di più su schede jQuery UI metodi interni, leggere questo:

http://api.jqueryui.com/tabs/

e leggere

creare (evento, ui)

Spero che questo aiuti.

Chris