0

我想在我的网页上有一个超文本“我想创建一个自定义包”。单击“我想创建自定义包”应该会导致隐藏超文本并显示所需的 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”开始存在。
除了提供解决方案之外，请慷慨地建议我在哪里犯了错误。提前致谢。

4

3 回答 3

3

问题是您的链接包含href=""在其中 - 这将导致浏览器在单击页面时重新加载页面。将您的 onclick 更改为toggle(); event.preventDefault();，它应该可以防止重新加载。您还应该将链接更改为 have href="#"，这只会导致浏览器在错误触发时跳转到页面顶部，而不是重新加载。

于 2013-08-01T19:59:27.997 回答
1

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

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

.hidden { display: none; }

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

于 2013-08-01T20:19:42.353 回答
0

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

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

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

href="javascript:void(0);"
于 2013-08-01T20:01:16.000 回答