-1

これはうまくいきません:

<a onclick="if(document.getElementById('div2','div1') .style.display=='none') {document.getElementById('div2','div1') .style.display=''}else
{document.getElementById('div2','div1') .style.display='none'}">
this1 ~~
</a>
<div id="div1" style="display:none"> 
1
</div>

<a onclick="if(document.getElementById('div2') .style.display=='none') {document.getElementById('div2') .style.display=''}else
{document.getElementById('div2') .style.display='none'}">
this2 ~~
</a>
<div id="div2" style="display:none"> 
2
</div>

this1 をクリックしたときに div2 と div1 を表示するにはどうすればよいですか? 両方を表示するのではなく、クリック時に div2 のみを表示します。なぜ機能しないのですか？

4

1 に答える 1

1

JavaScript は HTML タグには使用できません。そのままにしておく必要があります。そうは言っても、getElementById取得できる要素は 1 つだけです。2 つの要素を取得するには、2 回呼び出す必要があります。

次のようなことを試してください：

<a id="this1">this1 ~~</a>
<div id="div1" style="display:none">1</div>

<a id="this2">this2 ~~</a>
<div id="div2" style="display:none">2</div>

次に<head>、JavaScript を追加します。

// Make sure the page is ready
window.onload = function(){
    // Save references to them, so we don't need to keep looking them up
    var div1 = document.getElementById('div1'),
        div2 = document.getElementById('div2');

    // Add events to our <a> tags
    document.getElementById('this1').addEventListener('click', function(){
        // Toggle div1 and div2
        if(div1.style.display === 'none' && div2.style.display === 'none'){
            div1.style.display = div2.style.display = '';
        }
        else{
            div1.style.display = div2.style.display = 'none';
        }
    });

    document.getElementById('this2').addEventListener('click', function(){
        // Toggle div2 only
        if(div2.style.display === 'none'){
            div2.style.display = '';
        }
        else{
            div2.style.display = 'none';
        }
    });
};
于 2013-09-17T21:08:39.133 に答える