jQuery Làm thế nào để ẩn DIV, chúng được hiển thị cho một lần thứ hai trên trang tải

Tôi đã thực hiện một trình chiếu jquery rất nhanh, và tôi đang sử dụng để ẩn DIV mà không nên được hiển thị cho đến khi đến lượt của họ rõ ràng:jQuery Làm thế nào để ẩn DIV, chúng được hiển thị cho một lần thứ hai trên trang tải

$(document).ready(function() { 
    //Hide All Div's Apart From First 
    $('div#gall2').hide(); 
    $('div#gall3').hide(); 
    $('div#gall4').hide();

Nhưng khi tải trang, bạn có thể thấy DIV gall2 gall3 và gall4 trong một giây trước khi bị ẩn.

Nó sẽ là OK để chỉ cần thêm bên trong CSS của tôi:

#gall2, #gall3, #gall4{ display:none;}

Điều này sẽ giải quyết vấn đề của họ hiển thị cho một tích tắc, chỉ muốn biết nếu nó có thể chấp nhận

Cảm ơn.

Nguồn

2009-12-06 Thomas Carter

~~Vâng, nó chắc chắn có thể chấp nhận để làm điều đó trong CSS của bạn~~

Các đối tượng khác là chính xác. Nó không phải là một thực hành tốt để làm cho mọi thứ chỉ hiển thị với JS. Tôi đoán tôi đã suy nghĩ kỹ thuật: thay đổi CSS của bạn theo cách này sẽ giải quyết vấn đề.

Nguồn

2009-12-06 17:44:27 EMiller

Tôi nhận thấy ít người hơn có JS bị vô hiệu hóa, nhưng nếu chức năng sẽ được * bật * với JS, thì nội dung cũng phải là * ẩn * bằng cách sử dụng thứ gì đó được kích hoạt bởi JS. Sẽ ổn nếu JS chỉ thêm một lớp, nhưng ẩn theo mặc định trong CSS không phải là một ý hay. –

Luôn cố gắng tưởng tượng những người dùng nào đã tắt JS sẽ thấy. Nếu bạn sử dụng giải pháp CSS, các DIV không phải đầu tiên cũng sẽ không được hiển thị cho chúng, nhưng nếu bạn thay đổi các trang trình bày theo chương trình, chúng sẽ chỉ thấy các dấu đầu tiên, rõ ràng. Tốt nhất là cung cấp cho họ tùy chọn "Không JS". Sau đó, nếu bạn có thể chắc chắn rằng người dùng đã bật JS, bạn có thể ẩn các div bằng cách sử dụng CSS và hiển thị chúng bằng cách sử dụng JS.

Nguồn

2009-12-06 17:45:48 AttishOculus

Tắt trong CSS là tốt, nhưng sau đó người dùng không có JS sẽ không bao giờ thấy chúng.

Để vô hiệu hóa cho người dùng với JS chỉ, đánh dấu cơ thể và CSS phù hợp:

<body> 
    <script type="text/javascript"> 
    document.body.className += " js"; 
    </script>

CSS:

.js #gall2, .js #gall3, .js #gall4 { display: none; }

Nguồn

2009-12-06 17:50:56 orip

@hoip. Tôi làm một cái gì đó tương tự, nhưng làm điều đó trong đầu, và sử dụng 'document.documentElement.className + =" js "' để áp dụng nó vào phần tử 'html'. Tôi đặt nó trong một khối script trước tất cả các kịch bản khác của tôi. –

Điều đó rất thông minh – Gregory

@Gregory - nó không phải là ý tưởng của tôi, tôi đã nhìn thấy kỹ thuật này được sử dụng bởi những người khác. Tôi cũng nghĩ nó rất thông minh :) – orip

Là một alternatie để trả lời orip, bạn có thể làm như sau nếu bạn don Không thích thêm tập lệnh trong số <body>:

<html> 
<head> 
    <script src="jquery.js"></script> 
    <script> 
    $('html').addClass('js'); 
    $(function() { 
     // do DOM ready stuff 
    }); 
    </script> 
    <style> 
    .js #gall2, .js #gall3, .js #gall4 { display: none; } 
    </style> 
</head>

Bạn sẽ tránh nhấp nháy t theo cách của anh ấy vì bạn đang thêm tên lớp vào HTML trước khi sẵn sàng DOM.

Nguồn

2009-12-06 18:32:21 David

Rõ ràng ví dụ này sẽ không hoạt động trừ khi bạn đặt thẻ tập lệnh jQuery trước thẻ khác của bạn. Tôi khuyên bạn chỉ nên sử dụng 'document.documentElement.className + = 'js'' để tránh sự phụ thuộc của jQuery vào đầu game. –

@dcneiner: chỉ nêu một ví dụ ở đây. Tất nhiên bạn cần phải bao gồm thư viện jQuery trước khi sử dụng jQuery. Ví dụ của bạn cũng hoạt động. – David

Chúng đang được hiển thị vì mặc định các div có thể được đặt để hiển thị. Vì có thể mất vài giây để sự kiện "sẵn sàng" được kích hoạt trên trang, các cuộc gọi phương thức .hide() sẽ không trúng cho đến khi mọi thứ trên trang được tải và sẵn sàng.

Nếu tôi nhớ đúng phương thức .hide() sẽ chỉ đặt thuộc tính "display" của phần tử thành "none". Vì vậy, theo mặc định thiết lập div được ẩn thông qua CSS cho phép chúng luôn luôn được ẩn, và bạn nhận được tiền thưởng thêm của người dùng mà không JS không nhìn thấy chúng.

Nguồn

2009-12-06 19:58:35 MadcapLaugher

jQuery Làm thế nào để ẩn DIV, chúng được hiển thị cho một lần thứ hai trên trang tải

Trả lời

Các vấn đề liên quan