我一直在尝试默认情况下加载DIV(dpara),然后允许用户根据其按下的按钮切换DIV。

在页面加载时-dpara可见,但dtab和ddl不可见。

例如,如果用户选择dtab,则dpara被隐藏,dtab变为可见,而ddl保持隐藏。

但这似乎不起作用,因为我已经从中更新了代码:

<script type='text/javascript'>
        function arrange(div_id) {
            // First make all the divs hidden...
            divs = document.getElementsByTagName('div');
            for( var i = 0; i < divs.length; i++ ) {
                divs[i].style.display = 'none';
            }

            // Now make the one we want to be visible visible...
            document.getElementById(div_id).style.display = 'block';
        }
    </script>
    <form>
        <input type='button' value='dpara' onclick='arrange(this.value);' />
        <input type='button' value='dtab' onclick='arrange(this.value);' />
        <input type='button' value='ddl' onclick='arrange(this.value);' />
    </form>
    <div id='dpara'>
        123
    </div>

    <div id='dtab'>
        456
    </div>

    <div id='ddl'>
        789
    </div>


除了此var visibleDiv之外,还用于存储我正在通过的div的ID-但在发出警报时,它返回[object HTTPInputElement]。我错过了几个步骤吗?这是下面的亩新代码:

    <script type='text/javascript'>
var visibleDiv;

function arrange(div) {
    // Cache the passed in 'div' as the currently visible one
    visibleDiv = div;

    alert(visibleDiv);

    // First make all the divs hidden...
    var divs = document.getElementsByTagName('div'),
        i,
        len;

    for (i = 0, len = divs.length; i < len; i++) {
        divs[i].style.display = 'none';
    }

    // Now make the one we want to be visible visible...
    visibleDiv.style.display = 'block';
}
    </script>
    <form>
        <input type='button' value='dpara' onclick='arrange(this);' />
        <input type='button' value='dtab' onclick='arrange(this);' />
        <input type='button' value='ddl' onclick='arrange(this);' />
    </form>
    <div id='dpara'>123
    </div>

    <div id='dtab' style='display: none'>456
    </div>

    <div id='ddl' style='display: none'>789
    </div>

最佳答案

试试这个更新的版本:

var visibleDiv;

function arrange(div) {
    // Cache the passed in 'div' as the currently visible one
    visibleDiv = document.getElementById(div.value);

    // First make all the divs hidden...
    var divs = document.getElementsByTagName('div'),
        i,
        len;

    for (i = 0; i < divs.length; i++) {
        divs[i].style.display = 'none';
    }

    // Now make the one we want to be visible visible...
    visibleDiv.style.display = 'block';
}


JS Fiddle demo

问题在于,您需要将DOM节点传递到函数中,而您需要该节点的value。为了解决这个问题,您可以使用:onclick="arrange(this.value);",或者按照我的选择,将DOM节点传递到函数中,然后在函数中找到值。

其次,您假设JavaScript将找到正确的div元素而不调用document.getElementById()方法(我已将其纠正),将document.getElementById(div.value)返回的DOM节点分配给变量visibleDiv。我还删除了alert()。但这不是问题,只是使其看起来更好一点。

10-05 20:36
查看更多