Jquery-Tabs, unformatierte Liste, die nach einem jQuery-HTML-Neuladen in Firefox aufblitzt

Question

Ich verwende die neueste jQuery Tabs, und alle meine Registerkarten (und andere Inhalte über sie) sind innerhalb eines enthaltenden Div. Es gibt ein Formular in einer der Registerkarten, und wenn das Formular gesendet wird, wird es über AJAX verarbeitet, und dann die zurückgegebene HTML ersetzt die gesamte enthaltende Div. Diese zurückgegebene HTML enthält die Registerkarten wieder.

Nachdem das HTML ersetzt wurde, binde ich die jQuery-Funktionalität wieder an die Liste:

$('#tabs').tabs( { fx: { opacity: 'toggle' } } );

Nachdem ich andere Fragen gelesen habe, verwende ich class="ui-tabs" auf dem UL und class="ui-tabs-hide" auf dem LI, um alles auszublenden, bevor es formatiert wird.

Im IE8 und in Chrome funktioniert dies problemlos. In Firefox wird die unformatierte Liste jedoch kurz zwischen der HTML-Aktualisierung und der Formatierung der Registerkarten angezeigt (auch beim ersten Laden wird sie kurz angezeigt).

Haben Sie eine Idee, wie man dies vermeiden kann?

Answer 1

Von jQueryUI-Dokumente :

...einen FOUC (Flash of Unstyled Content) verhindern, bevor die Registerkarten initialisiert werden

Fügen Sie dem HTML-Code die erforderlichen Klassen hinzu, um ein inaktives Registerkartenfeld auszublenden - beachten Sie, dass > dies bei deaktiviertem JavaScript nicht reibungslos abläuft:

<div id="example" class="ui-tabs">

<div id="a-tab-panel" class="ui-tabs-hide"> </div>

</div>

El class="ui-tabs-hide" sollte auf jedem Feld erscheinen, nicht auf den Registerkarten.

Dies behebt nicht notwendigerweise das Problem, dass die Liste nicht gestylt ist. Wenn Sie die obige Methode richtig implementieren und immer noch das FOUC erhalten, sollten Sie das übergeordnete Element der Liste ausblenden, bis Sie den neuen Inhalt geladen und die Liste tabifiziert haben. Sie könnten die Methoden $().hide() und .show() verwenden, um dies zu tun.

Answer 2

Ich hatte gerade ein ähnliches Problem, eine andere Lösung, die ich gefunden habe, die für die Registerkarten-Navigation funktioniert, ist das Hinzufügen der Klasse "ui-tabs-nav" zu den <ul> Tag in der Registerkarte nav, (d.h. <ul class = "ui-tabs-nav"> ), die wie folgt aussieht:

<div id="tabs" class="ui-tabs">

<ul class = "ui-tabs-nav">
    <li><a href="x.html" title="ajax_content">Menu item A </a></li>
    <li><a href="x.html" title="ajax_content">Menu item B.</a></li>
    <li><a href="x.html" title="ajax_content">Menu item C</a></li>
    <li><a href="x.html" title="ajax_content">Menu item D</a></li>  

</ul>

Das Jquery-Skript für die Registerkarte fügt die Klasse "ui-tabs-nav" zu der <ul> automatisch, wenn das Skript ausgelöst wird, aber wenn Sie es selbst manuell in die HTML-Datei einfügen, wird das entsprechende Css für Ihr Registerkartenmenü eingefügt, auch wenn es eine Verzögerung beim Laden des Registerkartenskripts gibt. Ich hoffe, das hilft!

Answer 3

Eine Abwandlung von HeyPops' Verwendung des visibility Eigenschaft, sondern in Ihrem CSS-Stylesheet: Nutzen Sie die Klassen, die nach .tabs() initialisiert wird, wie zum Beispiel die .ui-tabs Klasse. Beispiel CSS:

.tab-this { visibility: hidden; }
.tab-this.ui-tabs { visibility: visible; }

Und dann fügen Sie einfach die Klasse ( tab-this ) zu dem Div, das Sie mit Registerkarten versehen, und zu allen anderen mit Registerkarten versehenen Inhalten Ihrer Website.

Answer 4

Dies scheint nicht immer zu funktionieren. Ich empfehle, Kelso.b Antwort eher als die jQuery docs Lösung zu verwenden. Hier ist ein Beispiel.

/* to hide flash styles on tabs pages - in this example customtabs is the parent element */
.customtabs {
  display: none;
}

Dann fügen Sie später in jQuery Tabs die show-Methode hinzu.

$(function() {
  $( "#tabs" ).tabs({

  });
  $( ".customtabs" ).css("display","inline");
});

Answer 5

Soweit ich sehen kann, funktioniert diese Umgehung viel sauberer, da sie auch verhindert, dass das UL angezeigt wird. hinzufügen style="visibility:hidden" zu dem DIV, das den UL und alle Registerkarten enthält, wie folgt:

<div id="tabs" style="visibility:hidden">
  <ul>
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
  </ul>
  <div>
    <div id="#tab1"></div>
    <div id="#tab2"></div>
    <div id="#tab3"></div>
  </div>
</div>

dann, wenn Sie das DIV mit Tabulatoren versehen, machen Sie es sichtbar nach es wurde formatiert, wie:

$('#tabs').tabs({ options }).css('visibility','visible');

Verwendung von Sichtbarkeit:versteckt statt Anzeige:keine bedeutet, dass alle Elemente innerhalb der Registerkarte DIV Größe und Position haben, was nicht der Fall ist bei Anzeige:keine .