Come nascondere html div

Question

Sto sviluppando una piccola applicazione in Ruby-On-Rails. Voglio nascondere un div in un file html.erb fino a quando non si fa clic su un collegamento. Qual è il modo più semplice per farlo?

Answer 1

nel file HTML:

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

Nel file CSS:

div.hidden { display: none; } 

In un inclusi file JavaScript, o all'interno di <script> tag:

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

La classe hidden sta nascondendo il div. La funzione jQuery sta elencando per un clic sul collegamento, quindi impedisce al link di essere seguito (event.preventDefault() impedisce di navigare su #), e infine di attivare la visibilità del div.

Vedere l'API jQuery per click() e toggle().

Answer 2

È possibile applicare gli stili display:none o opacity:0. Il primo farà in modo che il div non occupi alcun posto nella tua pagina, mentre il secondo lo renderà non visibile, ma conserverà comunque il suo posto. Si potrebbe dire che il primo lo nasconde mentre il secondo lo maschera a malapena. Potrebbero esserci altre soluzioni, ma quelle sono le due che conosco.

Answer 3

Questo è facile con javascript. Ad esempio, utilizzando la libreria jQuery javascript, è possibile alternare facilmente se un div appare basato su un collegamento, come mostrato qui. 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 è affidabile e funziona su molti browser, che lo differenzia da utilizzare selettori CSS3, come :target.