显示另一个时隐藏div [英] Hiding a div when another is shown
问题描述
因此，我有一个nav元素，它带有用作标签的无序列表.一共有三个，单击一个，它会在网站上显示一个div.但是，我想要这样，如果您单击另一个，它将隐藏当前显示的那个，然后显示您单击的那个.但是我似乎无法正确地做到这一点.这是我的功能:
So, I have a nav element with an unorder list that I use as tabs. There are three, you click one and it shows a div in the website. 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>
我试图做类似的事情
document.getElementById("page" + id + 1).style.display ="none";
document.getElementById("page"+id+1).style.display = "none";
我认为它将ID的显示样式更改为没有div的显示样式，而当前的ID却多了一个，但是它什么也没做.我要添加什么以使其隐藏所有当前打开的选项卡?
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. What would I add to this to have it hide all currently open tabs?
推荐答案
，您也可以将DIV名称存储在Hidden Input
also you can store the DIV name in a Hidden Input
<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>
这篇关于显示另一个时隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
