这看起来很简单，但我无法在任何地方找到解决方案。我需要有标签或带有选项的标签，可以从一种形式到另一种形式来回更改，并且我的复制/重置按钮可以使用正在使用的任何形式。
以下是一个单独孤立形式的示例，我需要再添加3个并保持其格式。 （我的实际页面有一个CSS样式格式，还有大约10个项目要填写）：
更新：在此处尝试了迄今为止的答案后，我意识到我还需要一种在IE7中可以运行的方法。
<head>
<title>Form Switching</title>
</head>
<body>
<!-- First Form -->
<form name="data_entry" id="frm" action="#">
<h2>Form 1</h2>
<table cellspacing="5" cellpadding="3">
<tr>
<td>Name:</td>
<td><textarea name="name" rows="2" cols="30" id="txt_name"></textarea></td>
</tr>
<tr>
<td>Color:</td>
<td><select name="color" id="txt_color">
<option value=""></option>
<option value="It is red">Red</option>
<option value="It is blue">Blue</option>
</select></td>
</tr>
<tr>
<td>Phone Number:</td>
<td><textarea name="phone" rows="5" cols="30" id="txt_phone"></textarea></td>
</tr>
<tr>
<td>Distance:</td>
<td><textarea name="distance" rows="1" cols="30" id="txt_distance"></textarea></td>
</tr>
<tr>
<!--COPY BUTTON-->
<td><input type="button" style="font-weight:bold;" name="clipboard_copy" value="Copy"
onClick="document.data_entry.holdtext.value = 'Name: ' + document.data_entry.name.value + '\n' + 'Color: ' + document.data_entry.color.value + '\n' + 'Phone: ' + document.data_entry.phone.value + '\n' + 'Distance: ' + document.data_entry.distance.value; javascript:selectcopy('data_entry.holdtext');javascript:validateForm()"></td>
<!--RESET BUTTON-->
<td><input type="button" style="font-weight:bold;" name="reset_form" value="Reset" onClick="this.form.reset();" /></td>
</tr>
</table>
<!-- Invisible text box that concatenates all the text boxes into one so they can be copied -->
<TEXTAREA name="holdtext" readonly="readonly" style="height:1px;width:1px;border:0" ID="holdtext"></TEXTAREA>
</form>
<SCRIPT LANGUAGE="JavaScript">
// ---------- Function to copy text to clipboard ----------
function selectcopy(fieldid)
{
var field=document.getElementById(fieldid) || eval('document.'+fieldid)
field.select()
if (field.createTextRange)
{field.createTextRange().execCommand("Copy")}
}
</SCRIPT>
</body>
</html>
如果需要更多Javascript，请给我一些如何使用它的解释，因为我还没有经验，我无法使用jquery，因为我只能与公司合作我无法下载任何文件的计算机。我在记事本中写了我的页面，更不用说在重新研究jQuery之后，我仍然不知道它到底是做什么的。
答案 0 :(得分：3)
如果没有jQuery，这不是太难，但我认为你应该和你工作的人谈谈他们的文件下载政策。无论如何，如果你想在没有jQuery的情况下继续，只需在一些div中添加所有表单，并确保将它们全部放在一个漂亮的容器div中，以使你的生活更轻松。
您还可以使用链接或可点击的div来创建导航栏（可选择按样式设置为标签），并引用相应表单容器的ID，如：
<div id="tab-nav">
<a href="javascript:;" class="selected" data-container="form-1-container">form1</a>
<a href="javascript:;" data-container="form-2-container">form2</a>
<a href="javascript:;" data-container="form-3-container">form3</a>
</div><!-- #tab-nav -->
<div id="awesome-container">
<div id="form-1-container">first tab</div>
<div id="form-2-container">second tab</div>
<div id="form-3-container">third tab</div>
</div><!-- #awesome-container -->
确保为它们提供所有唯一的id属性，并使用一些好的旧CSS来设置最初隐藏的div的样式：
#tab-nav {
border: 1px solid black;
width: 400px;
text-align: center;
}
#tab-nav a {
margin-left:25px;
margin-right:25px;
text-decoration: none;
}
#tab-nav a.selected {
background: #ccd;
border: 1px solid #999;
border-radius: 4px;
padding-left: 10px;
padding-right: 10px;
}
#awesome-container {
width:400px;
height: 300px;
border: 1px solid blue;
}
#awesome-container div {
width: 400px;
height:300px;
margin:0;
}
#awesome-container #form-1-container {
background: #ddd;
}
#awesome-container #form-2-container {
background: #f06;
display: none;
}
#awesome-container #form-3-container {
background: #04b;
display: none;
}
我的上帝那些标签会很漂亮！
继续...到javascript：）
编写一个处理标签和导航样式的点击处理程序。通常在没有jQuery的情况下，我们只需使用querySelectorAll来制作要执行操作的dom元素列表，但遗憾的是它在IE7中不可用，因此：
(function(){
var clack = function(e){
// IE is whack, apparently
var e = e || window.event;
if( e.srcElement ) {
e.target = e.srcElement;
};
var divs = document.getElementById("awesome-container").childNodes;
for (var i = 0; i < divs.length; i++){
if (divs[i].firstChild !== null) { // ignore text nodes
divs[i].style.display = "none";
}
}
document.getElementById(e.target.getAttribute("data-container")).style.display = "block";
var links = document.getElementById("tab-nav").childNodes;
for (var j = 0; j < links.length; j++) {
if (links[j].firstChild !== null) { // ignore text nodes
links[j].className = "";
}
}
e.target.className = "selected";
};
var links = document.getElementById("tab-nav").childNodes;
for (var i = 0; i < links.length; i++) {
if (links[i].firstChild !== null) { // you get the idea
links[i].onclick = clack;
}
}
})();
那应该让你去！