Onglets JQuery - Problème de style sur le contenu de la page load

Question

Le premier onglet de ma page contient beaucoup de contenu, y compris du texte et des images.

Cela provoque probablement problème visuel:

Une fois que l'utilisateur charge la page, pour une seconde, il verra la liste html régulière au lieu des onglets Érigé avec arrière-plan.

Quelque chose comme ceci:

• Tab Un
• Tab Deux
• Tab Trois

Tous les javascripts et sont chargés sur css haut de la page dans la section de la tête.

Est-ce que quelqu'un connaît une solution à ce problème?

Merci d'avance!

<script src="/js/jquery.ui/jquery-1.3.2.js" type="text/javascript"></script> 
<link rel="stylesheet" href="/css/ui.tabs.css" type="text/css"> 

<script src="/js/jquery.ui/ui/ui.core.js" type="text/javascript"></script> 
<script src="/js/jquery.ui/ui/ui.tabs.js" type="text/javascript"></script> 

 <div id="container-1"> 
      <ul> 
       <li><a href="#fragment-1"><span>Tab One</span></a></li> 
       <li><a href="#fragment-2"><span>Tab Two</span></a></li> 
       <li><a href="#fragment-3"><span>Tab Three</span></a></li> 
      </ul> 
      <div id="fragment-1"> 

       !!!!!! A lot of html code and pictures here !!!!!! 

      </div> 
      <div id="fragment-2"> 
       some text 2 
      </div> 
      <div id="fragment-3"> 
       some text 3 
      </div> 

     </div> 

Answer 1

Le second voit l'utilisateur une liste régulière est la quantité de temps jQuery et le plugin onglets doivent s'initialiser. Vous ne serez pas capable de faire beaucoup à ce moment-là. Toutefois, vous pouvez vous-même styliser les éléments <li> de manière à ce qu'ils soient beaux dès le départ.

Ouvrez une fenêtre de navigateur et attendez que les onglets s'affichent correctement. Maintenant, ouvrez les outils de développement et découvrez quelles classes CSS sont assignées par l'extension tabulations aux éléments <ul>/<li>/<div>.

Affectez ces classes directement dans le code HTML de base. Terminé.

Answer 2

Ne chargez pas tout le contenu à la fois. Les onglets de l'interface utilisateur jQuery ont la capacité de charger du contenu supplémentaire par AJAX. Alternative masquer le contenu en premier, et l'afficher par jQuery plus tard.

Answer 3

Essayez-le:

$(function() { 
    $("#container-1").tabs(); 
});