使用javascript在打开新窗体之前关闭所有打开的窗体

-1

我正在制作一个带图像的HTML页面，用户单击其图像以登录其发票页面。这是我到目前为止有：使用javascript在打开新窗体之前关闭所有打开的窗体

<script type="text/javascript"> 
    function showHideForm(formid) 
    { 
     var _form = document.getElementById(formid); 
     _form.style.display = (_form.style.display != "block") ? "block" : "none"; 
     return false; 
    } 
</script> 

<p> 
    <a href="#" onclick="return showHideForm('hiddenForm1');"> 
    <img src="" width="150" height= "150" /> 
    </a> 
</p> 
<form id="hiddenForm1" style="display: none;" method="post" action="user1_login.php"> 
    <input type="text" name="user" placeholder="Name" required /><br /> 
    <input type="text" name="pass" placeholder="Password" required/><br /> 
    <input type="submit" name="Submit" value="Submit" /> 
</form> 

<p> 
    <a href="#" onclick="return showHideForm('hiddenForm2');"> 
    <img src="" width="150" height="150" /> 
    </a> 
</p> 
<form id="hiddenForm2" style="display: none;" method="post" action="user2_login.php"> 
    <input type="text" name="user" placeholder="Name" required /><br /> 
    <input type="text" name="pass" placeholder="Password" required/><br /> 
    <input type="submit" name="Submit" value="Submit" /> 
</form>

它可以很好地只是如果你点击其他图片，你会得到几个实例在同一时间打开。

在运行代码打开新窗体之前，是否可以将一些代码添加到JavaScript的开头以关闭所有打开的实例？

来源

2015-12-20 pippa

你在说什么其他的图像。它按预期正常工作。 –

是的，它工作得很好。我已经提出了两张图片来展示正在发生的事情，但实际上我会有一页至少20张图片。如果有人点击了错误的链接或只是尝试了一下，该页面就会被打开。我只是想让它整洁。（如果可能的话）。 – pippa

给我一些时间来回答。 –

逻辑很简单，有一个用于opensform的类。在单击事件中，从现有打开的表单中删除该类，并将该类添加到当前单击的表单中。这里是如何用jQuery来做到这一点。

function showHideForm(formid) 
{ 
    // var _form=$("#"+formid); (in jquery) 

    var _form =document.getElementById(formid); 
    //select all existing opened forms and remove the class 
    $('.openedForm').removeClass('openedForm'); 
    //add the openedForm class to the currently clicked 
    $(_form).addClass('openedForm'); 
    return false; 
}

将下面的代码添加到您的css文件中。

.openedForm 
    { 
     display:block !important; 
    }

如果您需要使用javascript更改元素的CSS，请尝试使用类。通过这种方式，您可以使JavaScript代码更清晰可读，并且您的样式逻辑与主逻辑保持分离。尽量避免使用内联样式。

工作演示：
https://jsbin.com/nigivu/edit?html,css,js,output

来源

2015-12-21 16:55:55

如果这解决了您的问题，请通过接受答案来承认我的努力。这让我有动力。如有任何疑问，请随时询问 –

辉煌。这正是我想要的。非常感谢。 – pippa

如果您接受答案为解决方案，我将非常感激。 –

使用javascript在打开新窗体之前关闭所有打开的窗体

回答

相关问题