我希望在我的网页上有一个超文本“我想创建一个自定义包”。单击“我想创建自定义包”应该会隐藏超文本并显示所需的 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”就出现了。
除了提供解决方案之外,请慷慨地指出我犯了错误的地方。
提前致谢。
最佳答案
问题是您的链接中有 href=""
- 这将导致浏览器在单击时重新加载页面。将 onclick 更改为 toggle(); event.preventDefault();
它应该阻止重新加载。您还应该将链接更改为 href="#"
,这只会导致浏览器在错误触发时跳转到页面顶部,而不是重新加载。
关于javascript - 使用 javascript 切换显示/隐藏内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18003355/