我有一個小問題，並需要您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