jQuery Tabs Flash (FOUC), wenn Seite geladen

Question

Ich habe die folgende Website:

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

Ich benutze JQuery UI Tabs für mein Menü. Wenn Sie die Seite laden, blitzt der Inhalt in den Registerkarten auf.

Ich habe alles aus dem ui-tabs-hide Trick versucht, Dinge in Javascript zu verstecken. Gibt es einen Trick, den ich vermisse? Was soll ich machen?

Vielen Dank für Ihre Hilfe!

Answer 1

ich in eine ähnliche Situation lief und hier ist, wie ich das Thema angesprochen:

(1.) definiert eine CSS-Klasse namens "verstecken" und es auf "display: none"

(2.) in jedem div mit der Klasse "contentpanel", fügen Sie "verstecken" direkt neben es in Ihrem Markup. Dadurch wird sichergestellt, dass die Seite mit der Anzeige
keine geladen wird, anstatt auf JavaScript zu warten.

(3.) Wenn Sie den Selektor jquery.ui.tabs erstellen, verwenden Sie die Methode "tabscreate" , um die Klasse "hide" aus den Bereichen Inhalt zu entfernen. so Ihre Wähler etwas würde wie folgt aussehen:

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

Um mehr über jQuery UI Tabs interne Methoden herauszufinden, lesen Sie:

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

und lesen

erstellen (event, ui)

Hoffe das hilft.

Chris