使用javascript切换显示/隐藏内容

Question

我想在我的网页上有一个超文本“我想创建一个自定义程序包”。 单击“我想创建自定义程序包”应导致隐藏超文本并显示所需的DIV，在我的情况下，该DIV具有id =“ hide2”。

我现在所拥有的是：

1：对应的javascript

<script type="text/javascript">
function load1()
{
    document.getElementById('hide2').style.display='none';
    return false;
}
function toggle()
{
    document.getElementById('hide1').style.display='none';
    document.getElementById('hide2').style.display='';

}
</script>

2.相应的HTML代码：

<body onLoad="load1()">
<a onclick="toggle()" href="" id="hide1">I want to create a custom package</a>
    <div id="hide2">
    <p><input type="radio" name="">Name your price:
    <input type="text" width="10px">.00($299 minimum)<br>
    </p> 
</div>
</body>

该代码几乎可以正常工作，单击超文本将隐藏链接并显示“ hide2” div。 除了它返回其body.onLoad模式（即显示超文本和div隐藏）的事实之外，仅在几毫秒后div“ hide2”就出现了。
除了提供解决方案外，请慷慨地建议我在哪里犯了错误。 提前致谢。

Answer 1

问题是您的链接中包含href="" -这将导致浏览器在单击该页面时重新加载该页面。 将您的onclick更改为toggle(); event.preventDefault(); toggle(); event.preventDefault(); 并且应该防止重新加载。 您还应该将链接更改为具有href="#" ，这将导致浏览器在被错误触发时跳至页面顶部，而不是重新加载。

Answer 2

Jules指出了代码中的主要问题，但是代码也不是很漂亮，因此我自由地重构了代码： http : //jsfiddle.net/CgQgD/2/ :)

基本上，您希望将隐藏定义为一个类，而不是直接从JS操作CSS值，这样您就可以轻松地删除，添加和检查隐藏的类。

.hidden { display: none; }

这也意味着您可以很容易地在不使用内联CSS的情况下将元素初始隐藏起来，这会使您的onload处理程序无用（通常您还可以使用window.addEventListener('load', ...);相反，如果您确实需要使用onload事件）。

Answer 3

您可能想要从body标签切换脚本，并考虑使用jQuery，并将其用于初始隐藏：

$(document).ready(function (
{
//Script here
});

否则，您看到的问题背后的原因是您没有取消页面回发。 考虑使用此作为您的href：

href="javascript:void(0);"

使用javascript切换显示/隐藏内容

问题描述

3 个解决方案

解决方案1
3 2013-08-01 19:59:27

解决方案2
1 2013-08-01 20:19:42

解决方案3
0 已采纳 2013-08-01 20:01:16

使用javascript切换显示/隐藏内容

问题描述

3 个解决方案

解决方案1 3 2013-08-01 19:59:27

解决方案2 1 2013-08-01 20:19:42

解决方案3 0 已采纳 2013-08-01 20:01:16

解决方案1
3 2013-08-01 19:59:27

解决方案2
1 2013-08-01 20:19:42

解决方案3
0 已采纳 2013-08-01 20:01:16