所以我正在开发一个表单，当您单击它时，它会弹出另一个表单，然后是另一个表单，等等。
举个例子，这是我到目前为止所拥有的:
<head>
<script langauge="javascript">
function showGeneral(){
document.getElementById('general').style.display="block";
document.getElementById('colors').style.display="none";
document.getElementById('domain').style.display="none";
document.getElementById('details').style.display="none";
}
function showColors(){
document.getElementById('general').style.display="none";
document.getElementById('colors').style.display="block";
document.getElementById('domain').style.display="none";
document.getElementById('details').style.display="none";
}
function showDomain(){
document.getElementById('general').style.display="none";
document.getElementById('colors').style.display="none";
document.getElementById('domain').style.display="block";
document.getElementById('details').style.display="none";
}
function showDetails(){
document.getElementById('general').style.display="none";
document.getElementById('colors').style.display="none";
document.getElementById('domain').style.display="none";
document.getElementById('details').style.display="block";
}
</script>
</head>
<body>
<div id="general" name="general">
<h1> General </h1>
<form id="general" name="general">
Name <input type="text" id="frm1txt1" name="frm1txt1"/> <br>
Email <input type="text" id="frm1txt2" name="frm1txt2"/> <br>
<input type="button" id="frm1btn1" name="frm1btn1" value="Continue" onclick="showColors();"/> <br>
</form>
</div>
<div id="colors" name="colors" style="display:none">
<h1> Colors </h1>
<form id="frm2" name="frm2">
Green? <input type="text" id="frm2txt1" name="frm2txt1"/> <br>
Red? <input type="text" id="frm2txt2" name="frm2txt2"/> <br>
<input type="button" id="frm2btn1" name="frm2btn1" value="Continue" onclick="showDomain();"/> <br>
</form>
</div>
<div id="domain" name="domain">
<h1> Domain Name? </h1>
<form id="frm1" name="frm1">
Yes <input type="text" id="frm1txt1" name="frm1txt1"/> <br>
No <input type="text" id="frm1txt2" name="frm1txt2"/> <br>
<input type="button" id="frm1btn1" name="frm1btn1" value="Continue" onclick="showDetails();"/> <br>
</form>
</div>
<div id="details" name="details">
<h1> Describe Your Order </h1>
<form id="frm1" name="frm1">
Img <input type="text" id="frm1txt1" name="frm1txt1"/> <br>
kk <input type="text" id="frm1txt2" name="frm1txt2"/> <br>
<input type="button" id="frm1btn1" name="frm1btn1" value="Finish" onclick="showGeneral();"/> <br>
</form>
</div>
</body>
这些功能工作正常 - 但问题是它在页面刷新/加载时显示所有表单。如何才能在加载该页面时只显示第一个页面？
干杯!
最佳答案
当页面加载时，不会调用任何 JS 函数，因此不会处理任何函数，并且会显示所有表单。您需要添加对其中一个函数的显式调用。因此，要显示第一个表单，您只需要添加
showGeneral();
在您的脚本 block 中(例如在 showDetails() 函数之后)。
关于Javascript - 多表单显示问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8461997/