如何创建链接，从第一页开始称重到第二页 例如......如何从注册传递到登录（并记住我使颜色：红色）
标题 **。列表项列表：
请务必缩进。**
$("#sign-up-btn").click(function() {
$("#sign-up-form").show();
$("#log-in-form").hide();
$("#payments-form").hide();
$("#sign-up-btn").addClass("active");
$("#log-in-btn").removeClass("active");
$("#payments-btn").removeClass("active");
});
$("#log-in-btn").click(function() {
$("#sign-up-form").hide();
$("#log-in-form").show();
$("#payments-form").hide();
$("#sign-up-btn").removeClass("active");
$("#log-in-btn").addClass("active");
$("#payments-btn").removeClass("active");
});
$("#payments-btn").click(function() {
$("#sign-up-form").hide();
$("#log-in-form").hide();
$("#payments-form").show();
$("#sign-up-btn").removeClass("active");
$("#log-in-btn").removeClass("active");
$("#payments-btn").addClass("active");
});html {
width: 100%;
background: #0D3447;
font-family: 'HelveticaNeue-Light', Helvetica;
font-weight: 100;
-webkit-font-smoothing: antialiased;
}
body {
width: 100%;
margin: 0;
}
.wrapper {
text-align: center;
}
/*btn group*/
.btn-group {
display: inline-block;
width: 100%;
height: 40px;
margin: 35px auto;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
position: relative;
}
.btn {
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 7px 15px;
font-size: 15px;
line-height: 1.428571429;
border-radius: 4px;
margin-left: -5px;
}
.btn-selector {
color: #333333;
background-color: #ffffff;
border-color: #cccccc;
}
.btn-selector:hover,
.btn-selector:focus,
.btn-selector:active,
.btn-selector.active {
color: #333333;
background-color: #CFCCCC;
border-color: #adadad;
}
.btn-group .btn:focus {
outline: none;
}
.btn-group .btn:not(:first-child):not(:last-child) {
border-radius: 0;
}
.btn-group .btn:first-child:not(:last-child) {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.btn-group .btn:last-child:not(:first-child) {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
/*end of btn group*/
/*form general*/
.form {
margin: 40px auto;
padding: 10px 30px 35px;
display: block;
width: 375px;
background-color: #DEDCDC;
box-shadow: 0 0 25px 0 #000;
}
.form h2 {
color: #434740;
font-size: 40px;
margin: 10px 0 20px 0;
}
.form input, .form button, .form h2 {
font-family: 'HelveticaNeue-Light', Helvetica;
font-weight: 100;
}
input[type="text"],
input[type="password"] {
display: block;
background-color: #ffffff;
border: 1px solid #cccccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
font-size: 22px;
height: 50px;
padding: 4px 6px;
border-radius: 4px;
margin-bottom: 10px;
}
input[type="checkbox"], label {
display: inline-block;
float: left;
}
input:focus {
outline: none;
border: 1px solid #44C7A9;
}
.input-std {
width: 95.5%;
}
.input-half {
width: 45.9%;
float: left;
}
.input-quarter {
width: 21%;
float: left;
}
.btn-submit {
width: 100%;
font-size: 30px;
padding: 11px 19px;
border-radius: 6px;
border: 2px solid #cccccc;
cursor: pointer;
color: #ffffff;
}
.btn-submit:focus {
outline: none;
}
#sign-up {
background-color: #5EB320;
}
#log-in {
background-color: #1893A3;
}
#remember-me-wrapper {
position: relative;
height: 30px;
}
#payments {
background-color: #B33030;
}
#cvc {
float: none;
}
#log-in-form, #payments-form {
display: none;
}<div class="wrapper">
<div class="btn-group" id="form-selector">
<button type="button" class="btn btn-selector active" id="sign-up-btn">Sign Up</button>
<button type="button" class="btn btn-selector" id="log-in-btn">Log In</button>
<button type="button" class="btn btn-selector" id="payments-btn">Payments</button>
</div>
<div class="form" id="sign-up-form">
<h2 class="form-title">Sign Up</h2>
<input type="text" class="input-std" id="email" placeholder="Email">
<input type="text" class="input-half" id="first-name" placeholder="First Name">
<input type="text" class="input-half" id="last-name" placeholder="Last Name">
<input type="password" class="input-std" id="password" placeholder="Password">
<input type="password" class="input-std" id="password-confirmation" placeholder="Password Confirmation">
<button type="button" class="btn-submit" id="sign-up">Sign Up!</button>
</div>
<div class="form" id="log-in-form">
<h2 class="form-title">Log In</h2>
<input type="text" class="input-std" id="email" placeholder="Email">
<input type="password" class="input-std" id="password" placeholder="Password">
<div id="remember-me-wrapper">
<input type="checkbox" id="remember-me">
<label for="remember-me">Remember Me</label>
</div>
<button type="button" class="btn-submit" id="log-in">Log In!</button>
</div>
<div class="form" id="payments-form">
<h2 class="form-title">Payments</h2>
<input type="text" class="input-std" id="name" placeholder="Cardholder's Name">
<input type="text" class="input-quarter" id="number" placeholder="4242" maxlength="4">
<input type="text" class="input-quarter" id="number" placeholder="4242" maxlength="4">
<input type="text" class="input-quarter" id="number" placeholder="4242" maxlength="4">
<input type="text" class="input-quarter" id="number" placeholder="4242" maxlength="4">
<input type="text" class="input-half" id="cvc" placeholder="CVC" maxlength="3">
<input type="text" class="input-quarter" id="exp-month" placeholder="MM" maxlength="2">
<input type="text" class="input-half" id="exp-year" placeholder="YYYY" maxlength="4">
<button type="button" class="btn-submit" id="payments">Submit!</button>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.5.1.min.js?ver=3.5"></script>
答案 0 :(得分：0)
实际上，所有表单都在同一页面中，但位于不同的标签中。
您需要做的是执行当您单击“＃log-in-btn”时执行的相同功能。
var openLogInPage = function(){
$("#sign-up-form").hide();
$("#log-in-form").show();
$("#payments-form").hide();
$("#sign-up-btn").removeClass("active");
$("#log-in-btn").addClass("active");
$("#payments-btn").removeClass("active");
}
然后，当您使用以下代码将提交按钮订阅到click事件后，您可以重定向到该选项卡：
$("#sign-up").on("click", openLogInPage);