如何隐藏html div [英] How to hide html div

问题描述

我在Ruby-On-Rails中开发一个小应用程序。我想在一个html.erb文件中隐藏一个div，直到点击链接。

I'm developing a small application in Ruby-On-Rails. I want to hide a div in an html.erb file until a link is clicked. What is the simplest way to do this?

推荐答案

在您的html文件中：

In your html file:

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

在您的CSS文件中：

div.hidden { display: none; }

在包含的javascript文件中或< script& / code>标签：

In an included javascript file, or inside of <script> tags:

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

hidden 类隐藏了div。 jQuery函数正在列出一个点击链接，然后阻止链接被跟踪（ event.preventDefault（）保持它从浏览到＃

The hidden class is hiding the div. The jQuery function is listining for a click on the link, then preventing the link from being followed (event.preventDefault() keeps it from browsing to #)`, and lastly toggling the visibility of the div.

请参阅jQuery API 点击（）和切换（）。

See the jQuery API for click() and toggle().

这篇关于如何隐藏html div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！