在javascript幫助下打開div

Question

我想打開div，當我將鼠標光標放在某個特定鏈接上時，當我從鏈接中輸入時隱藏該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內聯事件處理程序（你應該），你可以去這樣的事情：

function setupHover(id){ 
    var el = document.getElementById(id); 
    if (el.addEventListener) { // modern browsers 
    el.addEventListener ('mouseover',togglediv,false); 
    el.addEventListener ('mouseout',togglediv,false); 
    } else if (el.attachEvent) { // IE 
    el.attachEvent ('onmouseover',togglediv); 
    el.attachEvent ('onmouseout',togglediv); 
    } else { // anybody else 
    el.onmouseover = togglediv; 
    el.onmouseout = togglediv; 
} 

@idealmachine顯示了一個很好的方式來封裝在他的（？）答案的偵聽器函數中。

然後你會打電話setupHover('foo')在onload：

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。它還將JavaScript中的事件處理程序完全附加到HTML中，儘可能保持不顯眼。這裏有一個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; 
} 

的JavaScript：

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'; 
    }); 

});