Cách ẩn html div

Question

Tôi đang phát triển một ứng dụng nhỏ trong Ruby-On-Rails. Tôi muốn ẩn một div trong một tập tin html.erb cho đến khi một liên kết được nhấp vào. Cách đơn giản nhất để làm điều này là gì?

Answer 1

Trong file html của bạn:

<a href="#" id="show_whatever">Show Whatever</a> 
<div id="whatever" class="hidden">...</div> 

Trong file CSS của bạn:

div.hidden { display: none; } 

Trong bao gồm một tập tin javascript, hoặc bên trong <script> tags:

$(function() { 
    $('a#show_whatever').click(function(event){ 
    event.preventDefault(); 
    $('div#whatever').toggle(); 
    }); 
}); 

Lớp hidden đang ẩn div. Hàm jQuery đang liệt kê một cú nhấp chuột vào liên kết, sau đó ngăn chặn liên kết bị theo sau (event.preventDefault() giữ nó khỏi duyệt đến #) `, và cuối cùng chuyển sang chế độ hiển thị của div.

Xem API jQuery cho click() và toggle().

Answer 2

Bạn có thể áp dụng các kiểu display:none hoặc opacity:0. Việc đầu tiên sẽ làm như vậy div không mất bất kỳ vị trí nào trên trang của bạn, trong khi thứ hai sẽ làm cho nó không hiển thị, nhưng nó vẫn sẽ giữ lại vị trí của mình. Bạn có thể nói rằng lần đầu tiên giấu nó trong khi thứ hai hầu như không che giấu nó. Có thể có các giải pháp khác, nhưng đó là hai giải pháp mà tôi biết.

Answer 3

Điều này thật dễ dàng với javascript. Ví dụ, bằng cách sử dụng thư viện javascript jQuery, bạn có thể dễ dàng chuyển đổi liệu một div xuất hiện dựa trên một liên kết, như được hiển thị ở đây. http://jsfiddle.net/Yvdnx/

HTML:

<a href="#">Click Me To Display Div</a> 
<div>Foo</div>​ 

Javascript:

$(function() { 
    $("div").hide(); 
    $("a").click(function(event) { 
     event.preventDefault(); 
     $("div").toggle(); 
    }); 
});​ 

jQuery là đáng tin cậy và làm việc trên nhiều trình duyệt, mà phân biệt nó từ việc sử dụng selectors CSS3 như :target.