JavaScript - 시작시 div 숨기기

페이지가로드되면 jQuery를 사용하여 div를 사용하는 div가 있습니다. 하지만로드 업의 맨 처음부터 숨길 수있는 방법이 있습니까?JavaScript - 시작시 div 숨기기

간단한 이유는 페이지가로드 될 때 div를 볼 수 있고 페이지가 완전히로드 될 때 숨길 수 있기 때문입니다.

전문가가 아닌 것처럼 보입니다.

이 문제를 해결할 방법이 있는지 궁금하십니까?

감사

출처

2012-04-13 Oliver Jones

div의 CSS를 'display : none'으로 설정할 수 없습니까? –

css에 관한 질문을 보내기 전에이 강좌 (http://www.w3schools.com/css/)를 통과 할 것을 제안합니다. – pylover

나는 그렇지 않다고 제안한다. w3schools는 옳은만큼 자주 잘못되었습니다. – Halcyon

사용 CSS 스타일 사업부를 숨 깁니다.

#selector { display: none; }

또는 아래처럼 사용

CSS

.hidden { display: none; }

HTML

<div id="blah" class="hidden"><!-- div content --></div>

및 jQuery를에

$(function() { 
    $('#blah').removeClass('hidden'); 
});

출처

2012-04-13 21:40:37

감사합니다. 여기에있는 모든 대답이 도움이되었지만. 이것은 환상적으로 작동합니다. 모두 –

자바 스크립트가 비활성화되어 있으면 div가 숨겨져 있다고 덧붙이고 싶습니다. 이 경우에 .no-js (Modernizr 참조)와 같은 클래스를 사용하여 표시 할 수 있습니다. 페이지가 완전히로드 될 때 시작되는 페이드 인, 슬라이드 인 등의 애니메이션에 특히 유용합니다. – LBridge

또한 js 메소드'toggleClass ('hidden')'을 사용하여 쉽게 가시성을 토글 할 수 있습니다. – renatov

왜 "display : none;"을 추가하지 않습니까? divs 스타일 속성에? 그게 전부 JQuery의. 숨기기() 함수 않습니다.

출처

2012-04-13 21:41:18 Moo

OP를 보면 jQuery가로드되기 전에 div가 숨겨져 있어야합니다. 그것이 바로 FOUC의 원인입니다. jQuery가로드되는 동안 div가 숨겨져 있는지 확인하려면 CSS 솔루션을 사용해야합니다. .hide() 사용은 jQuery가로드 된 후에 만 작동합니다. – JimP

@JimpP 무언가가 머물러 있다고 생각하면

과 같은 요소에 직접 추가해야합니다. 처음부터 HTML에서 요소를 숨겨야합니다. jQuery는이 css 속성을 hide 및 show 함수에 사용합니다. 나는 이것이 좋은 대답이라고 생각하지만, 좀 더 자세해야한다. – thinktt

CSS를 사용하여 당신은 화면을 설정할 수 있습니다 : CSS 파일 또는 스타일 속성의 요소에 대한 것도

#div { display:none; } 
<div id="div"></div> 



<div style="display:none"></div>

하거나 사업부 후 JS를 가진 것만으로는 충분 너무 빨리 일 수 있습니다,하지만 깨끗하지

출처

2012-04-13 21:41:32 GillesC

CSS 솔루션을 사용하지 않습니다. 가장 빠른 방법은 스크립트를 사용하여 스크립트를 즉시 숨기는 것입니다.

<div id="hideme"></div> 
<script type="text/javascript"> 
    $("#hideme").hide(); 
</script>

이 경우에는 Vega의 CSS 솔루션을 사용하는 것이 좋습니다. 그러나 (애니메이션과 같이) 더 복잡한 것이 필요한 경우이 방법을 사용할 수 있습니다.

여기에는 몇 가지 문제가 있습니다 (아래 설명 참조). 이 스크립트를 실제로 최대한 빨리 실행하려면 jQuery를 사용할 수없고 네이티브 JS 만 사용하고 다른 모든 스크립트는 로딩하지 않는 것이 좋습니다.

출처

2012-04-13 21:42:41 Halcyon

인라인'script' 태그는 HTML 파일을 더 혼란스럽게 만듭니다. –

그는 절대 속도가 필요합니다. 그 목표는 조금 지저분한 HTML을 정당화합니다. 실용적으로 표준에서 벗어날 때를 알 수 있습니다. – Halcyon

하지만 jQuery가 이미로드 된 것 같지 않습니다. '$ ("hideme"). hide();'당신에게'ReferenceError'를 줄 수 있습니다 ... –

동일한 문제가있었습니다.

숨기기 CSS를 사용하면 최상의 해결책이 아닙니다. JS가없는 사용자가 div를 볼 수 있기를 원하기 때 문입니다. 가장 깨끗한 해결책은 JQuery로 div를 숨기는 것입니다. 그러나 div는 0.5 초 정도 표시되며, div가 페이지 상단에 있으면 문제가됩니다.

이러한 경우 JQuery없이 중간 솔루션을 사용합니다. 이것은 하나의 작품과 즉각적 :

<script>document.write('<style>.js_hidden { display: none; }</style>');</script>

<div class="js_hidden">This div will be hidden for JS users, and visible for non JS users.</div>

물론, 당신은 여전히 예를 들어, DIV, JQuery와 토글()에 당신이 원하는 모든 효과를 추가 할 수 있습니다. 그리고 당신이 최고 동작 가능 (이럴) 얻을 것이다 : 비 JS 사용자를위한

이 사업부는 볼 직접
JS 사용자를위한 것입니다 사업부가 숨겨져 효과를 전환있다.

출처

2013-10-01 09:57:51

제 의견으로는 가장 좋은 대답입니다. 하지만, 나는 Modernisr이 제공 한 .no-js 클래스를 사용하는 편이 나을 것입니다. – LBridge

document.write없이이 작업을 수행 할 수있는 방법이 있습니까? – Pacerier

이 방법 저는 많이 사용했지만 매우 좋은 방법인지는 확실하지 않지만 필요에 따라 잘 작동합니다.

<html> 
<head> 
    <script language="JavaScript"> 
    function setVisibility(id, visibility) { 
    document.getElementById(id).style.display = visibility; 
    } 
    </script> 
</head> 
<body> 
    <div id="HiddenStuff1" style="display:none"> 
    CONTENT TO HIDE 1 
    </div> 
    <div id="HiddenStuff2" style="display:none"> 
    CONTENT TO HIDE 2 
    </div> 
    <div id="HiddenStuff3" style="display:none"> 
    CONTENT TO HIDE 3 
    </div> 
    <input id="YOUR ID" title="HIDDEN STUFF 1" type=button name=type value='HIDDEN STUFF 1' onclick="setVisibility('HiddenStuff1', 'inline');setVisibility('HiddenStuff2', 'none');setVisibility('HiddenStuff3', 'none');";> 
    <input id="YOUR ID" title="HIDDEN STUFF 2" type=button name=type value='HIDDEN STUFF 2' onclick="setVisibility('HiddenStuff1', 'none');setVisibility('HiddenStuff2', 'inline');setVisibility('HiddenStuff3', 'none');";> 
    <input id="YOUR ID" title="HIDDEN STUFF 3" type=button name=type value='HIDDEN STUFF 3' onclick="setVisibility('HiddenStuff1', 'none');setVisibility('HiddenStuff2', 'none');setVisibility('HiddenStuff3', 'inline');";> 
</body> 
</html>

출처

2017-03-22 15:22:22 John

왜 작동합니까? 어떤 변화를 만들었습니까? 이 방식으로 질문에 대처하는 응답은 독자가 자신의 문제를 더 잘 이해할 수 있도록 돕습니다. –

JavaScript - 시작시 div 숨기기

답변

관련 문제