0

我有一个 javascript 函数可以切换表单的可见性。

<script type="text/javascript">
function showHide(){
    var toggle = document.getElementById('form');
    if(toggle.style.display == 'none')
         toggle.style.display = 'block';
    else
         toggle.style.display = 'none';
}
</script>

此链接工作正常。

<a href="#" onclick="showHide()">Add new:</a>

但是当我在此链接中使用此功能时，它不起作用。单击此链接后，页面重新加载且隐藏的内容未显示。

<a href="products.php?act=edit&id=1" onclick="showHide()">Edit</a>

这是演示： products.php

我希望“添加新：”和“编辑”链接的工作方式相同，以显示或隐藏表单而不重新加载页面。

4

3 回答 3

3

作为vatiant，你可以这样：

<script type="text/javascript">
function showHide(){
    var toggle = document.getElementById('form');
    if(toggle.style.display == 'none')
         toggle.style.display = 'block';
    else
         toggle.style.display = 'none';
    document.location.href = 'http://yourdomain.com/products.php?act=edit&id=1'; //<<<<
}
</script>


<a href="#" onclick="showHide()">Add new:</a>

但不明白什么=）

于 2012-12-31T08:57:49.773 回答
1

首先，您可以简化功能：

function showHide(){
    var toggleStyle = document.querySelector('#form').style;
    toggleStyle.display = toggleStyle.display ? '' : 'none';
}​

看到这个jsfiddle

其次，您的点击操作确实有效，但由于 href 触发了页面刷新，因此它不可见。如果你想使用showHide，你可以在 href 添加一个参数，比如: <a href="products.php?act=edit&id=1&showform=1">，并使用showform页面加载时的值来触发可见性。或者，您可以使用 cookie 来“记住”表单显示状态。第三种选择是使用XmlHTTPRequest（XHR，又名 Ajax）来防止页面刷新。

于 2012-12-31T09:16:10.287 回答
1

如果您要链接到另一个页面/重新加载当前页面（这会导致所有状态丢失），那么您需要某种方式将 div 的可见性传递到新页面。你可以

<a href="products.php?act=edit&id=1&visible=formVisible" onclick="showHide()">Edit</a>

您需要formVisible在切换功能中设置值，或动态修改链接......有很多方法可以实现。

作为旁注，您应该在javascript中使用三等号

if(toggle.style.display === 'none')
于 2012-12-31T09:00:29.400 回答