Вкладки JQuery - проблема стиля при загрузке содержимого страницы

Question

Первая вкладка на моей странице содержит много контента, включая текст и изображения.

Это, вероятно, вызывает визуальную проблему:

Как только пользователь загрузит страницу, на секунду он увидит обычный список HTML вместо стилизованных вкладок с фоном.

Примерно так:

• Tab One
• Tab Two
• Вкладка Три

Все javascripts и css загружаются в верхней части страницы в разделе head.

Кто-нибудь знает какое-либо решение этой проблемы?

Заранее спасибо!

<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

Не загружайте весь контент сразу. Вкладки пользовательского интерфейса jQuery могут загружать дополнительный контент с помощью AJAX.

Альтернативно сначала спрячьте содержимое, а затем отобразите его с помощью jQuery.

Answer 2

Попробуйте:

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

Answer 3

Второй раз, когда пользователь видит обычный список, это количество времени, которое jQuery и плагин вкладок должны инициализировать сами. Вы не сможете многое сделать с этим временем.

Тем не менее, вы можете самостоятельно стилизовать элементы <li> таким образом, чтобы они выглядели хорошо с самого начала.

Откройте окно браузера и подождите, пока закладки появятся правильно. Теперь откройте инструменты разработчика и выясните, какие CSS-классы назначаются расширением tabs элементам <ul> / <li> / <div>.

Назначьте эти классы прямо в базовом HTML. Готово.