如何隱藏html div

Question

我正在Ruby-On-Rails上開發一個小應用程序。我想在html.erb文件中隱藏div，直到單擊鏈接。什麼是最簡單的方法來做到這一點？

Answer 1

在HTML文件中：

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

在你的CSS文件：

div.hidden { display: none; } 

在包含的JavaScript文件或裏面的<script>標籤：

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

的hidden類正在隱藏div。 jQuery函數列出鏈接點擊，然後阻止鏈接被跟蹤（event.preventDefault()阻止瀏覽到#），最後切換div的可見性。

請參閱jQuery API click()和toggle()。

Answer 2

您可以應用樣式display:none或opacity:0。首先會讓div在你的頁面上沒有任何位置，而第二個會使它看不到，但它仍然會保留他的位置。你可以說第一個隱藏它，而第二個隱藏它。可能還有其他解決方案，但這些是我所知道的。

Answer 3

這很容易與JavaScript。例如，使用jQuery javascript庫，您可以輕鬆切換div是否基於鏈接顯示，如下所示。 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是可靠的，在許多瀏覽器上運行，這區別於使用CSS3選擇器如:target。