Как скрыть html div

Я разрабатываю небольшое приложение в Ruby-On-Rails. Я хочу скрыть div в html.erb-файл, пока не будет нажата ссылка. Каков самый простой способ сделать это?

6
css html ruby-on-rails ruby-on-rails-3 ruby-on-rails-3.1

3 ответов

в вашем 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.

см. API jQuery для нажмите кнопку() и toggle ().

12

это легко с javascript. Например, используя библиотеку javascript jQuery, вы можете легко переключать, появляется ли 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.

2

Вы можете применить стили display:none или opacity:0. Первый сделает так, чтобы div не занимал никакого места на Вашей странице, а второй сделает его невидимым, но он все равно сохранит свое место. Можно сказать, что первый скрывает его, в то время как второй едва маскирует его. Могут быть и другие решения, но это те два, о которых я знаю.

1