javascript - Javascript: 2 つの異なるテキスト リンクで 2 つの異なる div を (同じ場所に) 表示したい

Question

z-indexまたは非表示のアプローチを使用する必要があるかどうかわからないため、いくつかの異なる方法を試しましたが、何もうまくいきません。

1つを表示するためのリンクを取得でき、2つの間に1つのリンクシャッフルさえありますが、2つの異なるリンクを2つの異なるdivで機能させることができないようです。

コードは次のとおりです。

    function toggle_visibility("music" , "contact") {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
           e.style.display = 'block';

}

<a href="#" onclick="toggle_visibility("music");">music</a>
<a href="#" onclick="toggle_visibility("contact");">contact</a>

<div id="music" style="display:none;"> stuff </div>

<div id="contact"> stuff </div>

Answer 1

以下のようなものでしょうか。

http://jsfiddle.net/vhzAR/

HTML:

<a href="#" id="music_toggle">music</a>
<a href="#" id="contact_toggle">contact</a>
<div id="music" style="display:none;"> music stuff </div>
<div id="contact"> contact stuff </div>

JavaScript:

function toggle_visibility(enable, disable) {
    var e = document.getElementById(enable);
    e.style.display = 'block';
    e = document.getElementById(disable);
    e.style.display = 'none';
}

document.getElementById('music_toggle').onclick = function() {
    toggle_visibility('music', 'contact');
};

document.getElementById('contact_toggle').onclick = function() {
    toggle_visibility('contact', 'music');
};