html - 如何隐藏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 是可靠的，并且可以在许多浏览器上运行，这与使用 CSS3 选择器（如:target.

Answer 3

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