如何隐藏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的可见性。

请参阅click()和toggle()的jQuery API。

Answer 2

使用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是可靠的，适用于许多浏览器，这与使用:target等CSS3选择器不同。

Answer 3

您可以应用样式display:none或opacity:0。第一个将使得div不会在你的页面上占据任何位置，而第二个将使它不可见，但它仍将保留他的位置。你可以说第一个隐藏它，而第二个几乎不掩盖它。可能还有其他解决方案，但那些是我所知道的。