html div를 숨기는 방법

Question

저는 Ruby-On-Rails에서 작은 응용 프로그램을 개발 중입니다. 링크를 클릭 할 때까지 html.erb 파일에서 div를 숨기고 싶습니다. 가장 간단한 방법은 무엇입니까?

Answer 1

는 포함 된 자바 스크립트 파일에서

div.hidden { display: none; } 

, 또는 <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

display:none 또는 opacity:0 스타일을 적용 할 수 있습니다. 첫 번째는 div가 페이지에서 어떤 위치도 차지하지 않도록하고 두 번째는 보이지 않게 만들지 만 여전히 그의 자리를 유지합니다. 첫 번째는 숨기고 두 번째는 간신히 가면된다고 말할 수 있습니다. 다른 해결책이 있을지도 모르지만 그것들은 내가 아는 두 가지입니다. CSS 파일에서

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

: HTML 파일에서

Answer 3

이것은 자바 스크립트로 쉽게 나타납니다. 예를 들어 jQuery 자바 스크립트 라이브러리를 사용하면 여기에 표시된 것처럼 div를 링크를 기반으로 표시할지 여부를 쉽게 전환 할 수 있습니다. http://jsfiddle.net/Yvdnx/

HTML :

<a href="#">Click Me To Display Div</a> 
<div>Foo</div>​ 

자바 스크립트 :

$(function() { 
    $("div").hide(); 
    $("a").click(function(event) { 
     event.preventDefault(); 
     $("div").toggle(); 
    }); 
});​ 

jQuery를 신뢰할 수 있고 많은 브라우저에서 작동, 같은 :target 같은 CSS3 선택기를 사용하여 구별합니다.