[英]javascript toggle to show/hide div
我有一个 javascript 开关 function:
<script type="text/javascript">
function toggle(layer) {
var d = document.getElementById(layer);
d.style.display = (d.style.display == 'none') ? '' : 'none';
}
</script>
这是做什么的:
我在页面上有几个链接,单击这些链接时,它会显示/隐藏与其关联的相应 DIV 部分。
在以下两个链接中,它打开和关闭名为 stusearch 和 facsearch 的 div 部分
<a href="javascript:toggle('stusearch')" ><b>Student Manager</b></a>
<a href="javascript:toggle('facsearch')" ><b>Faculty Manager</b></a>
这很好用,除了,我想在单击新的切换链接时隐藏之前显示的切换,此时前一个保持打开状态,而新的切换在其下方打开。
我在这里稍微调整了你的代码。 我最终添加了一个变量来存储您想要显示/隐藏的 div,以防您想添加更多 div 来切换:
var divs = [ "stusearch", "facsearch" ];
function toggle(layer) {
var d
for(var i = 0; i < divs.length; i += 1) {
d = document.getElementById(divs[i]);
d.style.display = 'none';
}
d = document.getElementById(layer);
d.style.display = '';
}
<script type="text/javascript">
function toggle(layer) {
var d = document.getElementById(layer);
d.style.visibility = (d.style.visibility == 'hidden') ? 'visible' : 'hidden';
}
</script>
在纯 javascript 中,最简单的方法是“记住”您修改的最后一个元素 - 也就是:
var lastElement = null;
function toggle(elementId)
{
if(lastElement != null)
lastElement.style.display = 'none';
var newElement = document.getElementById(elementId);
newElement.style.display = (newElement.style.display == 'none') ? 'visible' : 'none';
if(newElement != lastElement)
lastElement = newElement;
}
您隐藏最后一个引用,然后获取新的引用并显示它。
你可以保留一个本地变量,
<script type="text/javascript">
function(){
var shown;
window.toggle = function(layer) {
if(shown)
shown.style.display = '';
var d = document.getElementById(layer);
d.style.display = (d.style.display == 'none') ? '' : 'none';
shown = d;
}
}
</script>
或者,您可以使用 css class 控制可见性,并在设置之前从所有元素中全面移除 class。
这是一个 jQuery 解决方案,以防您决定实现一个库:
JavaScript:
function toggle(layer) {
$('.toggleableSearch').hide();
$(layer).show();
}
html:
<a href="javascript:toggle('stusearch')" ><b>Student Manager</b></a>
<a href="javascript:toggle('facsearch')" ><b>Faculty Manager</b></a>
<div id="stusearch" class="toggleableSearch"></div>
<div id="facsearch" class="toggleableSearch"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.