在HTML中隐藏和显示div块
[英]Hiding and showing div blocks in html
问题描述
I am a beginner to html and in the below code , i have tried to hide and show contents using div blocks. 
我是html的初学者，在下面的代码中，我尝试使用div块隐藏和显示内容。 I am able to hide/ show the second div block but on clicking the first div block it doesn't work! 我可以隐藏/显示第二个div块，但是单击第一个div块不起作用！ Dunno where it is going wrong. Dunno哪里出了问题。 Any help would be appreciated. 任何帮助，将不胜感激。
<html>
<body>
<script type="text/javascript">
function hideshow(which)
{
if (!document.getElementById)
return
if (which.style.display=="block")
which.style.display="none"
else
which.style.display="block"
}
</script>
<table>
<tr><td><a href="javascript:hideshow(document.getElementById('adiv1'))"><label class="menuOff" style="font-size: 35px;">Div block 1</label></a></td></tr>
<div id="adiv1" style="font:24px bold; display: none;">
<table>
<tbody>
<tr><td>Now you see me</td></tr>
<tr><td>Hello</td></tr>
</tbody>
</table>
</div>
<tr><td><a href="javascript:hideshow(document.getElementById('adiv'))"><label class="menuOff" style="font-size: 35px;">Div block 2</label></a></td></tr>
<div id="adiv" style="font:24px bold; display: none;">
<table>
<tbody>
<tr><td>Now you see me</td></tr>
<tr><td>Hello</td></tr>
</tbody>
</table>
</div>
</table>
</body>
</html>
6 个解决方案
解决方案1
6 2013-12-11 13:06:48
Your HTML is incorrect: 您的HTML不正确：
<table>
<tr><td><a href="javascript:hideshow(document.getElementById('adiv1'))"><label class="menuOff" style="font-size: 35px;">Div block 1</label></a></td></tr>
<!-- You can't have a div here -->
<div id="adiv1" style="font:24px bold; display: none;">
Did you mean to have another table row in there? 您是不是要在其中再排一个表格？
<tr>
<td>
<div id="adiv1" style="font:24px bold; display: none;">
</td>
</tr>
The same issue applies to the second div element 同样的问题也适用于第二个div元素
解决方案2
5 2013-12-11 13:11:28
The problem isn't your javascript but your HTML, it's not valid. 问题不是您的JavaScript，而是您的HTML，它无效。 Your javascript, although a bit odd (why do you check if getElementById exist? You used it to call the function!), is OK. 您的JavaScript尽管有些奇怪（为什么要检查getElementById是否存在？您使用它来调用函数！），却可以。
The problem is that your DIVs are floating in the middle of two TR. 问题是您的DIV浮动在两个TR的中间。 A table structure is: 表结构为：
<table>
<tr> // a row
<td></td> // one cell
</tr> // end of a row
</table> end of table
What happens when you put stuff between Rows is undefined behavior. 当您在行之间放置东西时发生的事情是未定义的行为。 If you check your DOM in Chrome for instance, you'll see that your DIVs are actually empty and that the text (which you put in another table, my eyes..!) has 'escaped' out of them. 例如，如果您在Chrome中检查DOM，您会发现DIV实际上是空的，并且文本（您放在另一个表中，我的眼睛..！）已从其中“逸出”。 And that's why it does nothing when you click: the style is updated, but there is nothing in it. 这就是为什么单击时它什么都不做的原因：样式已更新，但其中没有任何内容。
Funny thing: if you fix just the first DIV, the second DIV will start not working. 有趣的是：如果仅修复第一个DIV，则第二个DIV将开始不起作用。 It all depends on how the browser parse your invalid HTML and it's a bit random. 这完全取决于浏览器如何解析无效的HTML，并且它是随机的。 Always close your tags, and always make sure you are following the basic structures... Like putting a TR within a UL instead of a LI (I have seen it.) 始终关闭标签，并始终确保您遵循基本结构...就像将TR放入UL而不是LI一样（我已经看过。）
解决方案3
1 2013-12-11 13:11:57
the structure of your html is: 您的html的结构是：
<table> <!-- to delete -->
<div>
<table>
</table>
</div>
<div>
<table>
</table>
</div>
</table> <!-- to delete -->
It's not correct, when you remove the extra "table" tags it works fine 这是不正确的，当您删除多余的“表格”标签时，它可以正常工作
解决方案4
1 2013-12-11 13:13:15
You have some errors on the tags nesting. 您在标记嵌套方面有一些错误。
Here example with less tags. 在此示例中，标签较少。
two buttons, each hides/shows different div. 两个按钮，每个按钮隐藏/显示不同的div。
<!doctype html>
<!-- do not forget to declare type! -->
<html>
<head>
<title> Hide/show div</title>
<script type="text/javascript">
function HideShow(which)
{
if (which.style.display=="block")
which.style.display="none"
else
which.style.display="block"
}
</script>
</head>
<body>
<button onclick = 'HideShow(document.getElementById("div1"));'>Hide/Show div 1</button>
<div id='div1' style='display:block'>This data is in div 1</div>
<br>
<button onclick = 'HideShow(document.getElementById("div2"));'>Hide/Show div 2</button>
<div id='div2' style='display:block'>This data is in div 2</div>
</body>
</html>
解决方案5
-1 2013-12-11 13:08:54
I suggest you to look into the toggle function provided with the JQuery Framework. 我建议您研究一下JQuery Framework附带的toggle功能。
http://api.jquery.com/toggle/ http://api.jquery.com/toggle/
The main problem seems to be that your HTML is incorrect, you were putting a div within the table element, which made it an direct child. 主要问题似乎是您的HTML不正确，您在表元素中放置了一个div，这使其成为直接子元素。
This will ofcourse throw an major error. 当然，这将引发重大错误。
I've made a JSFiddle example for you http://jsfiddle.net/mNDN2/ 我为您制作了一个JSFiddle示例http://jsfiddle.net/mNDN2/
HTML: HTML：
<table>
<tr>
<td>
<label id="blockOne" class="menuOff" style="font-size: 35px;">Div block 1</label>
</td>
</tr>
<tr id="adiv1">
<td>asdfasdf</td>
</tr>
</table>
JS: JS：
$("#blockOne").on('click', function () {
$("#adiv1").toggle();
});
CSS: CSS：
#adiv1 {
display: none;
}
解决方案6
-2 2013-12-11 13:05:43
try to remove the a tag and on div block, add 尝试删除一个标签并在div块上添加
onclick="hideshow(document.getElementById('adiv'))"
If it's not working, use jquery. 如果不起作用，请使用jquery。 To get an element with jquery 用jQuery获取元素
$("#adiv1") for example
and to hide, do 躲起来做
$("#adiv1").hide()
to show: 显示：
$("#adiv1").show()
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.