javascript-如何在没有jquery的情况下切换一页上的表单？
作者：互联网
这似乎很简单,但是我在任何地方都找不到解决方案.我需要具有选项卡或带有选项的标签,以从一种形式来回切换到另一种形式,并且我的复制/重置按钮可以与正在使用的任何形式一起使用.
这是一个孤独形式的示例,我需要再添加约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,请给我更多有关如何使用它的解释,因为我还没有使用Java的经验,而且我无法使用jquery,因为我只能在我使用的公司计算机上使用它无法下载任何文件到.我正在用记事本编写页面,即使在重新研究jQuery之后也更不用说了,我仍然不知道它的真正作用.
解决方法:
小提琴更新：http://jsfiddle.net/f8Qvd/5/
更新#2现在应该可以在IE7中使用
如果没有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
标签：forms,select,tabs,internet-explorer-7,javascript 来源： https://codeday.me/bug/20191123/2066074.html