2013-01-07 4 views
6

나는 다음과 같은 웹 사이트가 : 내 메뉴 JQuery와 UI 탭을 사용하고jQuery를 탭 플래시 (FOUC) 때 페이지가로드

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

. 페이지를로드하면 탭에 내용 플래시가 있습니다.

저는 ui-tabs-hide 트릭에서부터 자바 스크립트에 숨어있는 모든 것을 시도했습니다. 내가 빠진 트릭이 있니? 어떻게해야합니까?

도움 주셔서 감사합니다.

+0

나는 문서 준비 상태에서 tabcontrol.js에있는 것을 호출해야한다고 생각합니다. –

+0

css (js가 아님)로 탭에서 z 인덱스 = -1을 시도하십시오 - 작동하는지 확인 – sajawikio

답변

9

내가 여기에 비슷한 상황에 달려 내가 문제를 해결하는 방법은 다음과 같습니다

(1) "숨기기"라는 CSS 클래스를 정의하고 설정을에 "디스플레이 : 없음"

(2.)를 각 div에서 "contentpanel"클래스와 함께 사용하려면 마크 업에서 옆의 "숨기기"를 추가하십시오. 이렇게하면 페이지를로드 할 때
이 아닌 JavaScript가 처리 될 때까지 기다리지 않고 페이지를로드 할 수 있습니다.

(3.) jquery.ui.tabs 선택기를 만들 때 패널에서 "hide"클래스를 제거하려면 "tabscreate"메서드 을 사용하십시오. 그래서 당신의 선택은 다음과 같이 보일 것입니다 : (이벤트, UI

생성

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

를 읽기 :

//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 탭에 대한 자세한하려면 다음을 읽어)

희망이 도움이됩니다.

크리스

+0

이것이 완벽하게 작동했습니다! 고맙습니다! –

+0

문제 없습니다. 언제든지. – chrisvillanueva