Question

我想在我的网页上有一个超文本“我想创建一个自定义包”。单击“我想创建自定义程序包”应该会隐藏超文本并显示所需的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();，它应该会阻止重新加载。您还应该将链接更改为href="#"，这只会导致浏览器跳转到页面顶部，如果它是由错误触发而不是重新加载。

Answer 2

Jules指出了代码中的主要问题，但代码也不是很漂亮，所以我冒昧地重构代码：http://jsfiddle.net/CgQgD/2/：）

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

.hidden { display: none; }

这也意味着您可以在不使用内联CSS的情况下轻松隐藏元素，这会使您的onload处理程序无效（如果您真的必须使用onload，通常也会使用window.addEventListener('load', ...);事件）。

Answer 3

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

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

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

href="javascript:void(0);"

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

3 个答案: