[英]Hiding a div when another is shown
So, I have a nav element with an unorder list that I use as tabs. 所以,我有一个nav元素,它带有一个无序列表,用作标签。 There are three, you click one and it shows a div in the website.
一共有三个,您单击一个就会在网站上显示一个div。 However, I want it so that if you click another, it will hide the one currently being shown, and then show the one you clicked.
但是,我想要这样,如果您单击另一个,它将隐藏当前显示的那个,然后显示您单击的那个。 But I can't seem to get it right.
但我似乎无法正确解决。 Here is the function I have:
这是我的功能:
function display(action, id)
{
if (action == 'show')
{
document.getElementById("page"+id).style.display = "block";
document.getElementById("link"+id).href= "javascript:display('hide', "+id+")";
}
if (action == 'hide')
{
document.getElementById("page"+id).style.display = "none";
document.getElementById("link"+id).href= "javascript:display('show', "+id+")";
}
}
</script>
I tried to do something like 我试图做类似的事情
document.getElementById("page"+id+1).style.display = "none"; document.getElementById(“ page” + id + 1).style.display =“ none”;
I thought that it would change the display style to none of the div with an id one more than the current, but instead it does nothing. 我以为它将ID的显示样式更改为没有div的显示样式比当前显示多一个,但是它什么也不做。 What would I add to this to have it hide all currently open tabs?
我要添加什么使其隐藏所有当前打开的选项卡?
also you can store the DIV
name in a Hidden Input
您也可以将
DIV
名称存储在Hidden Input
http://jsfiddle.net/we2AJ/ http://jsfiddle.net/we2AJ/
<body>
<script language="javascript">
function MyFunction(divName){
//hidden val
var hiddenVal = document.getElementById("tempDivName");
//hide old
if(hiddenVal.Value != undefined){
var oldDiv = document.getElementById(hiddenVal.Value);
oldDiv.style.display = 'none';
}
//show div
var tempDiv = document.getElementById(divName);
tempDiv.style.display = 'block';
//save div ID
hiddenVal.Value = document.getElementById(divName).getAttribute("id");
}
</script>
<input id="tempDivName" type="hidden" />
<ul>
<li><a href="#" OnClick="MyFunction('myDiv1');">Show myDiv1</a></li>
<li><a href="#" OnClick="MyFunction('myDiv2');">Show myDiv2</a></li>
<li><a href="#" OnClick="MyFunction('myDiv3');">Show myDiv3</a></li>
</ul>
<br/>
<div id="myDiv1" style="background-color:red; height:200px; width:200px; display:none">
myDiv1
</div>
<div id="myDiv2" style="background-color:yellow; height:200px; width:200px; display:none">
myDiv2
</div>
<div id="myDiv3" style="background-color:green; height:200px; width:200px; display:none">
myDiv3
</div>
</body>
You can improve the structure of this code by leveraging css classes. 您可以利用CSS类来改进此代码的结构。 First, use
getElementsByClassName
to gather all your nav items. 首先,使用
getElementsByClassName
收集所有导航项。 Then attach a click handler to them that points to your toggle code. 然后将点击处理程序附加到指向您的切换代码的点击处理程序。
In the togglecode, add a class for the shown element and remove it for the old one. 在切换码中,为显示的元素添加一个类,并为旧元素删除它。 I made assumptions about your html structure, but this should be easily adaptable.
我对您的html结构进行了假设,但这应该很容易适应。 classList isn't supported by < IE7, but you can substitute in a regex to handle this if support is necessary.
<IE7不支持classList,但是如果需要支持,您可以用正则表达式替代以处理此问题。
http://jsfiddle.net/8Q4vy/1/ http://jsfiddle.net/8Q4vy/1/
<div class="nav show"><span>A</span></div>
<div class="nav"><span>B</span></div>
<div class="nav"><span>C</span></div>
<script>
//get nav items
var navElems = document.getElementsByClassName('nav');
//attach click handler to each
for (var i = 0; i < navElems.length; i++) {
navElems[i].onclick = toggleVisible;
}
//handle click events
function toggleVisible() {
//hide currently shown item
document.getElementsByClassName('show')[0].classList.remove('show');
//show clicked item
this.classList.add('show');
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.