-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只有一个元素。您需要调用它两次才能获得两个元素。

尝试这样的事情：

<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 回答