我有一个小问题，并需要您profesisonal ...如何切换/选择html表格
所以我有两个窗体中的两个div。 DIV ID=A and DIV ID=B
当用户访问我的网站时，希望提供访问者在表单之间进行选择。他用户看到一个下拉框，或两个单选按钮，如果选择选项A，然后形成A负载，如果B ...然后B ..
但我不知道如何做到这一点，什么是做到这一点的最佳做法？我可以使用简单的HTML，并选择重定向到像formA.php和formB.php子页面？或者使用JQuery和简单的隐藏并显示所需的div？
ya建议什么？而且我该怎么做呢？
比你。
jquery或类似将是最优雅的imo。像
<script type="text/javascript">
$(document).ready(function() {
// hide the forms when page is ready
$('#a').hide();
$('#b').hide();
$('#button1').click(function(){
$('#a').show();
});
$('#button2').click(function(){
$('#b').show();
});
});
</script>
隐藏窗体，有2个按钮（可以是风格divs），。然后当他们被点击时，显示相应的HTML表单。
可以扩展为“切换”形式，或者只允许选择1。如果JS被禁用但是可能会出现
问题（这两种形式将是可见的）
您可以轻松地使用下拉菜单选择正确的形式。这里有一个例子
<!-- Forms HTML -->
<div id="form-A">
... html form here ....
</div>
<div id="form-B">
... another html form here ....
</div>
<!-- Hide forms initially with Javascript (visible for non Javascript users) -->
<script type="text/javascript">
$("#form-A, #form-B").hide();
</script>
<!-- A dropdown to select a value -->
<select id="choose-form">
<option>Please choose...</option>
<option value="form-A">Some form</option>
<option value="form-B">Another form</option>
</select>
<!-- and some simple jQuery -->
<script type="text/javascript">
$(document).ready(function() {
$("#choose-form").change(function() {
//Hide -other- visible forms
$("#form-A, #form-B").hide();
$("#" + $(this).val()).show();
});
});
</script>
如再由罗斯描述为你建议你自己，如果关闭了JavaScript重定向他们根据自己的选择，我会使用jQuery。
$('.message a').click(function() {
$('form').animate({
height: "toggle",
opacity: "toggle"
}, "slow");
});.login-page {
width: 360px;
padding: 8% 0 0;
margin: auto;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form .btn {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #4CAF50;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
.form button:hover,
.form button:active,
.form button:focus {
background: #43A047;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #4CAF50;
text-decoration: none;
}
.form .register-form {
display: none;
}
.infoo {
margin: 50px auto;
text-align: center;
}
.infoo h1 {
margin: 0 0 15px;
padding: 0;
font-size: 36px;
font-weight: 300;
color: #1a1a1a;
}
.infoo span {
color: #4d4d4d;
font-size: 12px;
}
.infoo span a {
color: #000000;
text-decoration: none;
}
.infoo span .fa {
color: #EF3B3A;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="login_page" class="login-page">
<div class="form">
<form id="register_form" class="register-form">
<input type="text" placeholder="Username" />
<input type="password" placeholder="password" />
<input type="text" placeholder="email address" />
<input type="submit" class="btn" value="Sign up" />
<p class="message">
Already registered?
<a href="#">Sign In</a>
</p>
</form>
<form id="login_form" action="#" method="POST" class="login-form">
<input name="username" id="username" type="text" placeholder="username" />
<input name="password" id="password" type="password" placeholder="password" />
<input id="btnLg" type="submit" class="btn" value="Sign in" />
<p class="message">
Not registered?
<a href="#">Create an account</a>
</p>
</form>
</div>
</div>
@offtopic：如果你给别人一个反对票，那是因为他做得不对，如果你告诉他为什么藏汉可能是有用的。 – Nealv 2010-09-09 08:50:24
我真的不明白你在说什么......但是谢谢你的投票.. – holian 2010-09-09 09:53:41
你误会了。有人投票你的帖子不解释为什么。评论是不是针对你 – Ross 2010-09-09 11:44:35