javascript for 不工作

Question

第一次尝试 javascript，我找不到解决方案。我需要一个打开/关闭 div 按钮。

如果 div1 不可见并且我按下按钮 1

将其设置为可见

设置所有其他不可见

elseif div1 可见并且我按下按钮 1

设置不可见

这是我到目前为止的代码...

<script type="text/javascript">
    function toggle_visibility(id) 
    {
        if (document.getElementById(id).style.display=='block')
        {
            document.getElementById(id).style.display='none';
        }
        else
        {
            document.getElementById(id).style.display='block';

            for (i=0; i<5; i++)
            {
                document.getElementById(i).style.display='none';
            }
        }
    }
</script>

<button onclick="toggle_visibility(1);">
    1
</button>

...

<button onclick="toggle_visibility(5);">
    5
</button>

我忘了这个->

<div id="1" style="display:none">
1
</div>

...

<div id="5" style="display:none">
5
</div>

Answer 1

您没有带有 id 的元素。并且 id 不得以数字开头(在 (X)HTML 中，但不是 HTML5)!如果您只想显示一个元素，请尝试我的 showOnly 函数。

<script type="text/javascript">
    function toggle_visibility(id) 
    {
        var i; // omiting this causes a global variable
        if (document.getElementById("a"+id).style.display=='block')
        {
            document.getElementById("a"+id).style.display='none';
        }
        else
        {
            document.getElementById("a"+id).style.display='block';

            for (i=1; i<=5; i++)
            {
                document.getElementById("a"+i).style.display='none';
            }
        }
    }

    function showOnly(id) {
        for(var i=1; i<=5; i++) {
            document.getElementById("a"+i).style.display='none';
        }
        document.getElementById("a"+id).style.display='block';
    }
</script>

<div id="a1" onclick="toggle_visibility(1);">1</div>
<!-- ... -->
<div id="a5" onclick="toggle_visibility(5);">5</div>

另请参阅 fiddle .