如何隐藏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 .