我目前正在使用3个div - 在页面上查看默认值但当用户点击按钮时,div被隐藏,所选的div显示在其位置。
如何编写if语句来标识用户当前选择的div?例如:
if selected_div is 'dpara' then ....
else if selected_div is dtab then ....
提前致谢!
<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'>
</div>
<div id='dtab' style='display: none'>
</div>
<div id='ddl' style='display: none'>
</div>
答案 0 :(得分:1)
由于您已经浏览了每个按钮的功能,因此您可以将可见的div
保留在变量中,例如:
var visibleDiv;
function arrange(divId) {
// Cache the passed in 'div' as the currently visible one
visibleDiv = document.getElementById(divId);
// 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';
}
答案 1 :(得分:0)
我建议您实现一个JS库,它将帮助您跨浏览器执行此操作。例如,JQuery可以确定这里描述的可见内容......
答案 2 :(得分:0)
在启动时识别div
并为其分配新功能:
$('#dpara')[0].myFunc = function() { ... }
$('#dtab')[0].myFunc = function() { ... }
现在你可以
selected_div.myFunc();
如何找到所选的div?使用:visible
选择器:
$('div:visible')[0].myFunc();
PS:[0]
从jQuery列表中获取DOM元素。