jQuery tab flash (FOUC) khi tải trang

Question

Tôi có trang web sau đây:

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

Tôi đang sử dụng JQuery UI Tabs cho trình đơn của tôi. Khi bạn tải trang, có một đèn flash của nội dung trong các tab.

Tôi đã thử mọi thứ từ mẹo ui-tabs-hide để ẩn mọi thứ trong Javascript. Có một mẹo tôi đang thiếu? Tôi nên làm gì?

Cảm ơn sự giúp đỡ của bạn!

Answer 1

tôi chạy vào một tình huống tương tự và đây là cách tôi giải quyết vấn đề này:

(1.) định nghĩa một lớp css được gọi là "ẩn" và đặt nó là "display: none"

(2.) trong mỗi div có lớp "contentpanel", thêm "ẩn" ngay bên cạnh trong phần đánh dấu của bạn. điều này sẽ đảm bảo tải trang bằng cách hiển thị
không, thay vì đợi javascript xử lý.

(3.) khi bạn tạo bộ chọn jquery.ui.tabs, sử dụng phương thức "tabscreate" để loại bỏ lớp "ẩn" khỏi nội dung của bạn bảng. nên chọn của bạn sẽ trông như thế này:

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

Để tìm hiểu thêm về jQuery UI tab phương pháp nội bộ, đọc:

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

và đọc

tạo (sự kiện, ui)

Hy vọng điều này sẽ hữu ích.

Chris