Question

我创建了一个页面，有三种形式，我必须在表单上显示一次。

假设当我点击注册表单中的you have an account already?按钮时，它将转到登录表单，登录表单将忘记密码，同一表格应位于两个表单按钮内。（登录和注册）。

您还可以在下面看到图片：

*{margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:13px;}

form 	{ 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">
    	<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">
    	<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">
    	<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

你可以做这样的事情

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>

Answer 2

我尝试在jQuery中创建它是成功的我只是在jquery中编写一些代码，这里是一个相同的例子：

＆＃13;

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

＆＃13;

*{margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:13px;}

form 	{ 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 	{ float:left; width:100%;}

＆＃13;

<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">
    	<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">
    	<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>

＆＃13;

<强> Updated Fiddle

谢谢你们......

每次点击一次可以看到表格

2 个答案: