자바 스크립트를 사용하여 div를 엽니 다

Question

div에서 마우스 커서를 가져 가면 링크에서 mouesout 할 때 해당 div를 숨길 수 있습니다.

Answer 1

이

<script type="text/javascript"> 
function show(divID) { 
var item = document.getElementById(divID); 
if (item) { 
item.className='unhidden'; 
} 
} 
function hide(divID) { 
var item = document.getElementById(divID); 
if (item) { 
item.className='hidden'; 
} 
} 
</script> 

<style type="text/css"> 
.hidden { 
display: none; 
} 

.unhidden { 
display: block; 
} 
</style> 

<p><a href="javascript:void(0);" onmouseover="show('test1');" onmouseout="hide('test1')">Show/Hide</a></p> 

<div id="test1" class="hidden"> 
testing 
</div> 

Answer 2

올드 스쿨 :

<a href="#" id="foo" onmouseover="togglediv();" onmouseout="togglediv();">Toggler</a> 
<div id="bar">Content</div> 

그리고 JS :

togglediv = function() { 
    var mydiv = document.getElementById('bar'); 
    mydiv.style.display = mydiv.style.display == '' ? 'block' : ''; 
} 

것은 당신이 (당신은 안) 인라인 이벤트 핸들러로 HTML을 라드하지 않으려면, 당신이 할 수있는

@idealmachine은 (?) 답변의 수신기 기능에서 이것을 캡슐화하는 좋은 방법을 보여줍니다.

그럼 당신은 당신의 onload에 setupHover('foo')를 호출 것 :

window.onload = function(){ 
    setupHover('foo'); 
    // other stuff 
}; 

을 더 쉬운, 당신은 (예를 들어, jQuery를) 라이브러리를 사용하는 경우,이 동안 할 수있는 투명 브라우저 간 차이를 멀리 추출 :

$(document).ready(function(){ // when the DOM is loaded 
    $('a#foo').hover(// listen for hovers on the <a> 
    function(){ 
     $('#bar').toggle(); // and toggle visiblity directly 
     // $('#bar').toggleClass('visible'); // or toggle a class to achieve same 
    } 
); 
}); 

jQuery 나 이에 상응하는 선택 라이브러리를 포함해야하지만, 가장 쉬운 방법입니다.

모든

은 DIV가 처음에 숨겨져 가정

<style type="text/css"> 
div#yourdiv { display: none; } 
</style> 

Answer 3

을하려고 여기에 jQuery를 사용하지 않는 솔루션입니다. jQuery를 사용하면 코드 줄 수를 줄일 수 있습니다. .show과 .bind과 같은 메소드의 문서를 읽으면 그 이유를 쉽게 알 수 있습니다.

아래 코드는 JavaScript의 ability to set dynamic CSS styles을 사용합니다. 또한 HTML 내에서 가능한 조심성있게 유지하기 위해 JavaScript 내에서 이벤트 핸들러를 완전히 첨부합니다. 여기에 live link to my example이 있는데, 이것이 원하는 것인지 아닌지 알 수 있습니다.

HTML :

<a id="myMagicLink" href="http://www.google.com/">My Magic Link</a> 
<div id="openingDiv">Opens a div</div> 

예 CSS :

#openingDiv { 
    background-color: #ffc; 
    border: 1px solid; 
    padding: 0.5em; 
    display: none; 
    position: absolute; 
    left: 100px; 
    top: 100px; 
} 

자바 스크립트 : 당신이 호버에 표시 개방함으로써

function listenForEvent(elem, eventType, handler) { 
    if(elem.addEventListener) { 
     elem.addEventListener(eventType, handler, false); 
    } 
    else { 
     elem.attachEvent('on' + eventType, handler); 
    } 
} 

listenForEvent(window, 'load', function() { 
    var link = document.getElementById('myMagicLink'), 
     div = document.getElementById('openingDiv'); 

    listenForEvent(link, 'mouseover', function() { 
     div.style.display = 'block'; 
    }); 

    listenForEvent(link, 'mouseout', function() { 
     div.style.display = 'none'; 
    }); 

});