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

标签 javascript html

我希望在我的网页上有一个超文本“我想创建一个自定义包”。单击“我想创建自定义包”应该会隐藏超文本并显示所需的 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/

相关文章:

css - 如何将 1 个 div 中的 4 个标题并排放置?

javascript - 悬停/鼠标悬停时音频播放,可以在没有 jQuery 的情况下吗?

javascript - 如何使用滚动条可靠地获取屏幕宽度

javascript - 在 MVC4 脚本包中设置脚本类型

javascript - 如何限制多个文本区域的字数?

javascript - requireJS 优化器不包含嵌套的 require 调用

javascript - 从 html 字符串中获取特定标签的内容及其类名

javascript - 不同的组成元素

html - 如何解决IE6中的select overlap bug?

php - 使用 php 格式化和操作文本输入表单