我一直在尝试默认情况下加载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()
。但这不是问题,只是使其看起来更好一点。