CSS có hiệu lực sau khi trang đã hiển thị

Question

Tôi đang gặp phải sự cố này khi trang của tôi tải và sau đó sau một phần giây của hiệu ứng CSS hoặc kiểu tạo.

Vấn đề chính tôi đang nhìn thấy là với các tab JQuery mà tôi đang sử dụng http://docs.jquery.com/UI/Tabs#source

Khi trang web này hiển thị, các tab hiển thị một bên dưới người kia trong một giây như thế này:

 
One 
Two 
Three 

và sau đó hiển thị chính xác dưới dạng các tab

Có cách khắc phục nhanh chóng và dễ dàng này không. Cảm ơn

Answer 1

Nó không phải là kiểu; đó là thư viện jQuery UI javascript, là phần bổ sung html cần thiết vào trang của bạn để các tab có thể trông khá giống.

Bạn có một vài tùy chọn. Đầu tiên, bạn có thể ẩn các tab của bạn và hiển thị chúng khi jQuery UI đã hoàn thành phép thuật của nó. Thứ hai, bạn có thể tạo kiểu cho các tab của mình để chúng trông đủ gần với đầu ra đã hoàn thành để thay đổi không đáng chú ý. Thứ ba, bạn có thể thả jQuery UI và tạo kiểu cho các tab chỉ với CSS. Tất cả các phương pháp hợp lệ, tôi muốn nói.

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

EDIT:

Đối với tùy chọn đầu tiên, chúng ta hãy nói rằng đây là div của bạn có chứa các tab:

<div id="tabs"> 
    ...stuff... 
</div> 

Trong stylesheet của bạn, ẩn #tabs:

#tabs { 
    display:none; 
} 

Sau đó, sửa đổi cuộc gọi jQuery UI của bạn như vậy:

var t = $("#tabs"); 

t.tabs({ 
    create:function(){ 
     t.show(); 
    } 
}); 

Answer 2

CSS có được áp dụng qua Javascript không? Trong trường hợp đó, bạn có thể thêm một số CSS tĩnh để đảm bảo các phần tử được hiển thị ít nhất được sắp xếp theo chiều ngang trước khi javascript được thực hiện, bằng cách thêm một số CSS tĩnh.

Nếu trường hợp đó trình duyệt chỉ quyết định áp dụng CSS sau khi hiển thị mà không có nó, bạn không thể làm gì nhiều. Tuy nhiên, nó có thể được tải xuống từ từ (nếu nó là một tệp bên ngoài), trong trường hợp này, bạn có thể thêm kiểu quan trọng nhất vào một phần CSS trực tiếp trong HTML.

Answer 3

Trình duyệt thường tải tệp khi chúng xuất hiện trong mã HTML của bạn. Hãy chắc chắn để đưa các tham chiếu đến tập tin CSS của bạn đầu tiên để nó tải càng sớm càng tốt.

Nếu CSS đang được áp dụng bằng Javascript, bạn không thể tải nó nhanh hơn. Tệp Javascript cần được tải trước khi có thể sử dụng.

Ngoài ra, tôi không nghĩ có cách kiểm soát cách hoạt động của trình duyệt hoạt động. phản ứng

Answer 4

weirdlover và gần như đã làm việc cho tôi (sử dụng jQuery 1.5.2), nhưng tôi đã phải treo các sự kiện create:

var t = $("#tabs"); 

t.tabs({ 
    create:function(){ 
     t.show(); 
    } 
}); 

Cảm ơn!