javascriptの助けを借りてdivを開きます

Question

私はマウスカーソルをいくつかの特定のリンクに乗せて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の）ライブラリを使用している場合、あなたはこの中に操作を行うことができ、透過クロスブラウザの違いを抽象化：あなたは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 
    } 
); 
}); 

。

すべてがあなたの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'; 
    }); 

});