jQuery tabs flash (FOUC) при загрузке страницы

У меня есть следующий сайт:

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

Я использую вкладки jQuery UI для моего меню. Когда вы загружаете страницу, на вкладках появляется вспышка содержимого.

Я пробовал все от ui-tabs-hide трюк, чтобы скрыть вещи в Javascript. Есть ли трюк, который я упускаю? Что мне делать?

Спасибо за вашу помощь!

6
javascript jquery jquery-tabs jquery-ui jquery-ui-tabs

1 ответов

я столкнулся с подобной ситуацией, и вот как я решил проблему:

(1.) определите класс css под названием " hide "и установите его в"display:none"

(2.) в каждом div с классом "contentpanel" добавьте "скрыть" рядом с это в вашей разметке. это обеспечит загрузку страницы с display
нет, вместо того, чтобы ждать javascript для его обработки.

(3.) при создании jquery.пользовательский интерфейс.селектор вкладок, используйте метод "tabscreate" для удаления класса "скрыть" от вашего контента панели. таким образом, ваш селектор будет выглядеть примерно так:

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

чтобы узнать больше о внутренних методах вкладок jQuery UI, прочитайте это:

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

и читать

create (event, ui )

надеюсь, что это помогает.

Крис

9