当我单击一个div时，隐藏所有其他Div [英] Hide all other Div's when I click on one div
问题描述
朋友们，
我有一个小问题，我有一个主要的div，并且有许多小的div在页面加载时都设置为display = none.稍后，我将单击按钮，然后基于该按钮，我必须打开一个div.
我已经使用了切换功能来隐藏和显示div，但是当我单击Button2时，第一个div仍在show()中.现在我希望当我单击按钮时，只有相应的div必须打开，而所有其他div都必须打开关闭或隐藏.
Toggle或其他产品是否可能?
请为此告诉我一些代码.
在此先感谢
Ganesh
Hi friends,
I have small problem that I have one main div and in that there are many small divs all are set display=none at page load. Later I will click on buttons then based on the button I have to open a div.
I have used the toggle function to hide and show a div but when I click Button2 the first div is still in show() Now I want that when I click a button only that corresponding div has to open and all other div''s must be closed or hide.
Is it possible with Toggle or some other else?
Please do tell me some code for this.
Thanks in Advance
Ganesh
推荐答案
<html>
<head>
<script>
//this function will show the content within the <div> tag
function toggleDiv(divName)
{
thisDiv = document.getElementById(divName);
if (thisDiv)
{
if (thisDiv.style.display == "none") {
thisDiv.style.display = "block";
}
}
else {
alert("Error: Could not locate div with id: " + divName);
}
}
//this function will hide the content within the <div> tag
function toggleDiv2(divName)
{
thisDiv = document.getElementById(divName);
if (thisDiv)
{
if (thisDiv.style.display == "block") {
thisDiv.style.display = "none";
}
}
else {
alert("Error: Could not locate div with id: " + divName);
}
}
</script>
</head>
<body>
<table>
<tr>
<td>
<!-- calls the 'toggleDiv' that shows the <div> -->
<input name="ff1" type=radio value=Y onClick="toggleDiv('showme');">Show
<!-- calls the 'toggleDiv2' that hides the <div> -->
<input name="ff1" type=radio value=N onClick="toggleDiv2('showme');">Hide
</td>
</tr>
<tr>
<td>
<!-- by defualt hide the <div> tag -->
<div id="showme" style="display: none;">
<table width="100%" border="0" cellpadding="1" cellspacing="1">
<tr>
<td><div align="right">Now you can see me, yeay!!</div></td>
<td> </td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
Some other text here
</td>
</tr>
</table>
</body>
</html>
</div></div>
如果您想要更精细的控制，请在按钮上单击删除"，然后单击只显示需要显示的div".您可以确定使用类选择器为所有其他div分配了不显示类.
If you want more finer control then on button click remove display none class only from the div you need to display. You can be sure using class selector to assign display none class to all the other divs.
您可以在JQuery中使用Show()和Hide()进行尝试.
或参考以下相同的链接.
http://jquery.bassistance.de/accordion/demo/ [
You can try with Show() and Hide() in JQuery.
or refer the below link, which is same.
http://jquery.bassistance.de/accordion/demo/[^]
Still any issues, you can share your coding.
这篇关于当我单击一个div时，隐藏所有其他Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
