Question

我有一个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

我想要同时使用“Add new：”＆amp; “编辑”链接显示或隐藏表单而不重新加载页面。

Answer 1

你可以这样做：

<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>

但不明白为什么=）

Answer 2

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

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

您需要在切换功能中设置formVisible值，或动态修改链接......您可以通过多种方式实现此目标。

作为旁注，您应该使用triple equals in javascript

if(toggle.style.display === 'none')

Answer 3

首先，您可以简化功能：

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）来防止页面刷新。

使用两个链接显示或隐藏特定div的可见性

3 个答案: