[英]javascript toggle to show/hide div
I have a javascript toggle function:我有一个 javascript 开关 function:
<script type="text/javascript">
function toggle(layer) {
var d = document.getElementById(layer);
d.style.display = (d.style.display == 'none') ? '' : 'none';
}
</script>
What this does is:这是做什么的:
I have a few links on page and on click of these links it shows / hides the respective DIV section associated with it..我在页面上有几个链接,单击这些链接时,它会显示/隐藏与其关联的相应 DIV 部分。
In the following two links it opens and closes div section named stusearch & facsearch在以下两个链接中,它打开和关闭名为 stusearch 和 facsearch 的 div 部分
<a href="javascript:toggle('stusearch')" ><b>Student Manager</b></a>
<a href="javascript:toggle('facsearch')" ><b>Faculty Manager</b></a>
This works well except that, i would like to hide the previous shown toggle when a new toggle link is clicked, at the moment the previous one remains open, and the new one opens up below it.这很好用,除了,我想在单击新的切换链接时隐藏之前显示的切换,此时前一个保持打开状态,而新的切换在其下方打开。
I tweaked your code a bit here .我在这里稍微调整了你的代码。 I ended up adding a variable to store the divs you want to show/hide in case you want to add more divs to toggle:
我最终添加了一个变量来存储您想要显示/隐藏的 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>
In pure javascript, the easiest way is going to be to just 'remember' the last element you modified - aka:在纯 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;
}
You hide the last reference, then get the new one and show it.您隐藏最后一个引用,然后获取新的引用并显示它。
You could keep a local var to it,你可以保留一个本地变量,
<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>
Alternatively, you could control the visibility with a css class and do a blanket removel of the class from all elements before setting it.或者,您可以使用 css class 控制可见性,并在设置之前从所有元素中全面移除 class。
Here is a jQuery solution in case you ever decide to implement a library:这是一个 jQuery 解决方案,以防您决定实现一个库:
the JavaScript: JavaScript:
function toggle(layer) {
$('.toggleableSearch').hide();
$(layer).show();
}
the html: 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.