使表單每次點擊一次可見

Question

我已經創建了一個頁面，並有三種形式，我必須在窗體上顯示一次。

假設當我從註冊表單中點擊you have an account already?按鈕時，它將轉到登錄表單和登錄表單以忘記密碼，並且同一表單應該位於兩個表單按鈕中。 （登錄和註冊）。

您也可以在圖像上看到下面給出：

*{margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:13px;} 
 

 
form \t { width:400px !important;} 
 
form .title { font-size:17px; color:#ffffff; line-height:30px; font-weight:bold;} 
 

 
form#red { background:red;} 
 
form#blue { background:blue;} 
 
form#green { background:green;} 
 

 
form .button { background:#ffffff; float:left; padding: 1% 2%; width:98%; text-align:center; font-size:13px; font-weight:bold; color:#000000; margin-bottom:10px;} 
 
.clear { clear:both;} 
 

 
form{width:50%; margin:0 auto 20px; padding:10px; color:#ffffff;} 
 
form .field { width:100%; float:left; margin:0 0 5px 0;} 
 
form .label{width:20%; float:left;} 
 
form .input-field{width:80%; float:left;} 
 
form .input-field input { width:100%;} 
 
form .full-width { width:100%;} 
 
form #submit{ width:100%;}

<form id="red"> 
 
    \t <div class="title">Register</div> 
 
     <div class="field"> 
 
      <span class="label">First name:</span> 
 
      <span class="input-field"><input type="text" name="firstname"></span> 
 
     </div> 
 
     <div class="field"> 
 
      <span class="label">Last name:</span> 
 
      <span class="input-field"><input type="text" name="lastname"></span> 
 
     </div> 
 
     <div class="field"> 
 
      <span class="label">Email:</span> 
 
      <span class="input-field"><input type="text" name="firstname"></span> 
 
     </div> 
 
     <div class="field"> 
 
      <span class="label">Phone Number:</span> 
 
      <span class="input-field"><input type="text" name="lastname"></span> 
 
     </div> 
 
     <div class="field"> 
 
      <span clas="full-width"><input type="submit" id="submit" value="Register"/></span> 
 
     </div> 
 
     <div class="field"> 
 
      <span clas="full-width"><a href="" class="button">You have an account already? Log in here</a></span> 
 
     </div> 
 
     <div class="clear"></div> 
 
    </form> 
 
    
 
    <form id="blue"> 
 
    \t <div class="title">Login</div> 
 
     <div class="field"> 
 
      <span class="label">First name:</span> 
 
      <span class="input-field"><input type="text" name="firstname"></span> 
 
     </div> 
 
     <div class="field"> 
 
      <span class="label">Last name:</span> 
 
      <span class="input-field"><input type="text" name="lastname"></span> 
 
     </div> 
 
     <div class="field"> 
 
      <span clas="full-width"><input type="submit" id="submit" value="Login"/></span> 
 
     </div> 
 
     <div class="field"> 
 
      <span clas="full-width"><a href="" class="button">Forgot Password</a></span> 
 
     </div> 
 
     <div class="clear"></div> 
 
    </form> 
 
    
 
    <form id="green"> 
 
    \t <div class="title">Forgot Password</div> 
 
     <div class="field"> 
 
      <span class="label">Enter Email:</span> 
 
      <span class="input-field"><input type="text" name="firstname"></span> 
 
     </div> 
 
     
 
     <div class="field"> 
 
      <span clas="full-width"><input type="submit" id="submit" value="Send Reminder "/></span> 
 
     </div> 
 
     <div class="field"> 
 
      <span clas="full-width"><a href="" class="button">Suddenly remebered? Log in here</a></span> 
 
      <span class="clear"></span> 
 
      <span clas="full-width"><a href="" class="button">You don't have an account? Register here</a></span> 
 
     </div> 
 
     <div class="clear"></div> 
 
    </form>

Updated Fiddle

Answer 1

我嘗試jQuery來使其成功我只是寫在jQuery的一些代碼，這裏是相同的例子：

$(document).ready(function(){ 
 
\t \t $("#one").show(); 
 
\t \t $("#two").hide(); 
 
\t \t $("#three").hide(); \t \t 
 
\t \t $('.login').click(function(event) { 
 
\t \t \t $('#one').hide(); 
 
\t \t \t $('#two').show(); 
 
\t \t \t $('#three').hide(); 
 
\t \t \t event.stopPropagation(); 
 
\t \t }); 
 
\t \t 
 
\t \t $('.register').click(function(event) { 
 
\t \t \t $('#one').show(); 
 
\t \t \t $('#two').hide(); 
 
\t \t \t $('#three').hide(); 
 
\t \t \t event.stopPropagation(); 
 
\t \t }); 
 
\t \t 
 
\t \t 
 
\t \t $('.forgot').click(function(event) { 
 
\t \t \t $('#one').hide(); 
 
\t \t \t $('#two').hide(); 
 
\t \t \t $('#three').show(); 
 
\t \t \t event.stopPropagation(); 
 
\t \t }); 
 
\t \t 
 
\t });

*{margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:13px;} 
 

 
form \t { width:400px !important;} 
 
form .title { font-size:17px; color:#ffffff; line-height:30px; font-weight:bold;} 
 

 
form#red { background:red;} 
 
form#blue { background:blue;} 
 
form#green { background:green;} 
 

 
.clear { clear:both;} 
 

 
.form-main { float:left; width:100%; background:#eeeeee;} 
 

 
form{width:50%; margin:0 auto 20px; padding:10px; color:#ffffff;} 
 
.form-main .field, form .field { width:100%; float:left; margin:0 0 5px 0;} 
 
form .label{width:20%; float:left;} 
 
form .input-field{width:80%; float:left;} 
 
form .input-field input { width:100%;} 
 
form .full-width { width:100%;} 
 
form #submit{ width:100%;} 
 

 
.form-main .full-width { width:100%;} 
 

 
.form-main .field .button a { background:#ffffff; float:left; padding:1% 2%; width:96%; text-align:center; font-size:13px; font-weight:bold; color:#000000; margin-bottom:10px;} 
 
.form-main .field .button \t { float:left; width:100%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="form-main" id="one"> 
 
     <form id="red"> 
 
      <div class="title">Register</div> 
 
      <div class="field"> 
 
       <span class="label">First name:</span> 
 
       <span class="input-field"><input type="text" name="firstname"></span> 
 
      </div> 
 
      <div class="field"> 
 
       <span class="label">Last name:</span> 
 
       <span class="input-field"><input type="text" name="lastname"></span> 
 
      </div> 
 
      <div class="field"> 
 
       <span class="label">Email:</span> 
 
       <span class="input-field"><input type="text" name="firstname"></span> 
 
      </div> 
 
      <div class="field"> 
 
       <span class="label">Phone Number:</span> 
 
       <span class="input-field"><input type="text" name="lastname"></span> 
 
      </div> 
 
      <div class="field"> 
 
       <span clas="full-width"><input type="submit" id="submit" value="Register"/></span> 
 
      </div> 
 
      <div class="clear"></div> 
 
     </form> 
 
     <div class="field"> 
 
      <span class="full-width button"><a href="javascript:;" class="login">You have an account already? Log in here</a></span> 
 
     </div> 
 
    </div> 
 
    <div class="form-main" id="two"> 
 
    \t <form id="blue"> 
 
      <div class="title">Login</div> 
 
      <div class="field"> 
 
       <span class="label">First name:</span> 
 
       <span class="input-field"><input type="text" name="firstname"></span> 
 
      </div> 
 
      <div class="field"> 
 
       <span class="label">Last name:</span> 
 
       <span class="input-field"><input type="text" name="lastname"></span> 
 
      </div> 
 
      <div class="field"> 
 
       <span clas="full-width"><input type="submit" id="submit" value="Login"/></span> 
 
      </div> 
 
      <div class="clear"></div> 
 
     </form> 
 
     <div class="field"> 
 
      <span class="full-width button"><a href="javascript:;" class="forgot">Forgot Password</a></span> 
 
     </div> 
 
    </div> 
 
    
 
    <div class="form-main" id="three"> 
 
    \t <form id="green"> 
 
      <div class="title">Forgot Password</div> 
 
      <div class="field"> 
 
       <span class="label">Enter Email:</span> 
 
       <span class="input-field"><input type="text" name="firstname"></span> 
 
      </div> 
 
      
 
      <div class="field"> 
 
       <span clas="full-width"><input type="submit" id="submit" value="Send Reminder "/></span> 
 
      </div> 
 
      <div class="clear"></div> 
 
     </form> 
 
     <div class="field"> 
 
      <span class="full-width button"><a href="javascript:;" class="login">Suddenly remebered? Log in here</a></span> 
 
      <span class="clear"></span> 
 
      <span class="full-width button"><a href="javascript:;" class="register">You don't have an account? Register here</a></span> 
 
     </div> 
 
    </div>

Updated Fiddle

謝謝你們...

Answer 2

你可以做這樣的事情

var c = ["blue", "green", "red"], 
 
    i = 0; 
 

 
$('#b').click(function() { 
 
    $('#color').html(c[i]); 
 
    $('#a').css('background-color', c[i]); 
 
    i = (i + 1) % 3; 
 
}).click();

#a { 
 
    width: 300px; 
 
    height: 300px; 
 
    padding-top: 150px; 
 
} 
 
#b { 
 
    display: block; 
 
    margin: 0 auto; 
 
} 
 
#c { 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="a"> 
 
    <div id="c">This is <span id="color">blue</span> Form</div> 
 
    <button id="b">click</button> 
 
</div>