2017-08-09 73 views
-3

如何创建链接从第一页称重,第二页 例如...如何从标志传递到日志中(和记得我做颜色:红色如何使一个链接

  1. 列表项
  2. 列表项
  3. 列表项
  4. 列表项
  5. 列表项
  6. 列表项
  7. 列表项
  8. 标题 **。在列表项中列出:

    • 缩进四个空格。
      • 缩进八个空格。
    • 再有四个空格。
      1. 您可以在列表项中有多个 段落。

    只是一定要缩进。**


$("#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 { 
 
\t width: 100%; 
 
    background: #0D3447; 
 
    font-family: 'HelveticaNeue-Light', Helvetica; 
 
    font-weight: 100; 
 
    -webkit-font-smoothing: antialiased; 
 
} 
 

 
body { 
 
\t width: 100%; 
 
\t margin: 0; 
 
} 
 

 
.wrapper { 
 
\t text-align: center; 
 
} 
 

 
/*btn group*/ 
 
.btn-group { 
 
\t display: inline-block; 
 
\t width: 100%; 
 
\t height: 40px; 
 
\t margin: 35px auto; 
 
    font-size: 18px; 
 
    line-height: 1.33; 
 
    border-radius: 6px; 
 
    position: relative; 
 
} 
 

 
.btn { 
 
\t 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 { 
 
\t margin: 40px auto; 
 
\t padding: 10px 30px 35px; 
 
\t display: block; 
 
\t width: 375px; 
 
\t background-color: #DEDCDC; 
 
\t box-shadow: 0 0 25px 0 #000; 
 
} 
 

 
.form h2 { 
 
\t color: #434740; 
 
    font-size: 40px; 
 
\t margin: 10px 0 20px 0; 
 
} 
 
.form input, .form button, .form h2 { 
 
\t font-family: 'HelveticaNeue-Light', Helvetica; 
 
    font-weight: 100; 
 
} 
 

 
input[type="text"], 
 
input[type="password"] { 
 
\t display: block; 
 
\t background-color: #ffffff; 
 
\t border: 1px solid #cccccc; 
 
\t box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
 
\t font-size: 22px; 
 
    height: 50px; 
 
    padding: 4px 6px; 
 
    border-radius: 4px; 
 
    margin-bottom: 10px; 
 
} 
 

 
input[type="checkbox"], label { 
 
\t display: inline-block; 
 
\t float: left; 
 
} 
 

 
input:focus { 
 
\t outline: none; 
 
\t border: 1px solid #44C7A9; 
 
} 
 

 
.input-std { 
 
\t width: 95.5%; 
 
} 
 

 
.input-half { 
 
\t width: 45.9%; 
 
\t float: left; 
 
} 
 

 
.input-quarter { 
 
\t width: 21%; 
 
\t float: left; 
 
} 
 

 
.btn-submit { 
 
\t width: 100%; 
 
\t font-size: 30px; 
 
\t padding: 11px 19px; 
 
\t border-radius: 6px; 
 
\t border: 2px solid #cccccc; 
 
\t cursor: pointer; 
 
\t color: #ffffff; 
 
} 
 

 
.btn-submit:focus { 
 
\t outline: none; 
 
} 
 

 
#sign-up { 
 
\t background-color: #5EB320; 
 
} 
 

 
#log-in { 
 
\t background-color: #1893A3; 
 
} 
 

 
#remember-me-wrapper { 
 
\t position: relative; 
 
\t height: 30px; 
 
} 
 

 
#payments { 
 
\t background-color: #B33030; 
 
} 
 

 
#cvc { 
 
\t float: none; 
 
} 
 

 
#log-in-form, #payments-form { 
 
\t display: none; 
 
}
<div class="wrapper"> 
 
\t <div class="btn-group" id="form-selector"> 
 
\t \t <button type="button" class="btn btn-selector active" id="sign-up-btn">Sign Up</button> 
 
\t \t <button type="button" class="btn btn-selector" id="log-in-btn">Log In</button> 
 
\t \t <button type="button" class="btn btn-selector" id="payments-btn">Payments</button> 
 
\t </div> 
 
\t <div class="form" id="sign-up-form"> 
 
\t \t <h2 class="form-title">Sign Up</h2> 
 
\t \t <input type="text" class="input-std" id="email" placeholder="Email"> 
 
\t \t <input type="text" class="input-half" id="first-name" placeholder="First Name"> 
 
\t \t <input type="text" class="input-half" id="last-name" placeholder="Last Name"> 
 
\t \t <input type="password" class="input-std" id="password" placeholder="Password"> 
 
\t \t <input type="password" class="input-std" id="password-confirmation" placeholder="Password Confirmation"> 
 
\t \t <button type="button" class="btn-submit" id="sign-up">Sign Up!</button> 
 
\t </div> 
 
\t <div class="form" id="log-in-form"> 
 
\t \t <h2 class="form-title">Log In</h2> 
 
\t \t <input type="text" class="input-std" id="email" placeholder="Email"> 
 
\t \t <input type="password" class="input-std" id="password" placeholder="Password"> 
 
\t \t <div id="remember-me-wrapper"> 
 
\t \t \t <input type="checkbox" id="remember-me"> 
 
\t \t \t <label for="remember-me">Remember Me</label> 
 
\t \t </div> 
 
\t \t <button type="button" class="btn-submit" id="log-in">Log In!</button> 
 
\t </div> 
 
\t <div class="form" id="payments-form"> 
 
\t \t <h2 class="form-title">Payments</h2> 
 
\t \t <input type="text" class="input-std" id="name" placeholder="Cardholder's Name"> 
 
\t \t <input type="text" class="input-quarter" id="number" placeholder="4242" maxlength="4"> 
 
\t \t <input type="text" class="input-quarter" id="number" placeholder="4242" maxlength="4"> 
 
\t \t <input type="text" class="input-quarter" id="number" placeholder="4242" maxlength="4"> 
 
\t \t <input type="text" class="input-quarter" id="number" placeholder="4242" maxlength="4"> 
 
\t \t <input type="text" class="input-half" id="cvc" placeholder="CVC" maxlength="3"> 
 
\t \t <input type="text" class="input-quarter" id="exp-month" placeholder="MM" maxlength="2"> 
 
\t \t <input type="text" class="input-half" id="exp-year" placeholder="YYYY" maxlength="4"> 
 
\t \t <button type="button" class="btn-submit" id="payments">Submit!</button> 
 
\t </div> 
 
</div> 
 

 
<script type="text/javascript" src="https://code.jquery.com/jquery-1.5.1.min.js?ver=3.5"></script>

+2

恐怕我不太确定你想要什么实现(虽然没有任何降价是从我这里得到的)。你试图做到这一点,只要你直接**从''Sign Up''登录''登录'',''记住我''文本是红色的?但是当从'付款'到'登录'时,它应该是黑色的?你能否正确地澄清**你试图做什么? –

+0

亲爱的。我希望在页面注册时有一个链接,例如link in color,它在页面登录并进行颜色变成红色 – Anna

回答

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"); 
} 

然后当你可以订阅你的提交按钮点击事件,此代码后重定向到标签:

$("#sign-up").on("click", openLogInPage); 
+0

不起作用...... – Anna

+0

问题是因为jquery您包含在文件中的版本。尝试使用$(“#注册”)。click(openLogInPage);代替。 –

+0

谢谢,我明白了 – Anna