因为这些是别人的代码,所以里面jquery的代码不太懂,总之是页面点login没什么反应
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Animated Form Switching with jQuery</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Expand, contract, animate forms with jQuery wihtout leaving the page" />
        <meta name="keywords" content="expand, form, css3, jquery, animate, width, height, adapt, unobtrusive javascript"/>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
        <link rel="stylesheet" type="text/css" href="css/style_login.css" />
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/ChunkFive_400.font.js" type="text/javascript"></script>
<script type="text/javascript">

</script>
    </head>
    <body>
<div class="wrapper">
<div class="content">
<div id="form_wrapper" class="form_wrapper">


<form class="register" >
<h3>Register</h3>
<div class="column">
<div>
<label>First Name:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
<div>
<label>Last Name:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
<div>
<label>Website:</label>
<input type="text" value="http://"/>
<span class="error">This is an error</span>
</div>
</div>
<div class="column">
<div>
<label>Username:</label>
<input type="text"/>
<span class="error">This is an error</span>
</div>
<div>
<label>Email:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
<div>
<label>Password:</label>
<input type="password" />
<span class="error">This is an error</span>
</div>
</div>
<div class="bottom">
<div class="remember">
<input type="checkbox" />
<span>Send me updates</span>
</div>
<input type="submit" value="Register" />
<a href="index.html" rel="login" class="linkform">You have an account already? Log in here</a>
<div class="clear"></div>
</div>
</form>


<form class="login active"  action="index.html">
<h3>Login</h3>
<div>
<label>Username:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
<div>
<label>Password: <a href="forgot_password.html" rel="forgot_password" class="forgot linkform">Forgot your password?</a></label>
<input type="password" />
<span class="error">This is an error</span>
</div>

<div class="bottom">
<input type="submit" value="Login"></input>
<a href="register.html" rel="register" class="linkform">You don't have an account yet? Register here</a>

</div>
</form>


<form class="forgot_password" >
<h3>Forgot Password</h3>
<div>
<label>Username or Email:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
<div class="bottom">
<input type="submit" value="Send reminder"></input>
<a href="index.html" rel="login" class="linkform">Suddenly remebered? Log in here</a>
<a href="register.html" rel="register" class="linkform">You don't have an account? Register here</a>
<div class="clear"></div>
</div>
</form>
</div>
<div class="clear"></div>
</div>
 </div>
<!-- The JavaScript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//the form wrapper (includes all forms)
var $form_wrapper = $('#form_wrapper'),
//the current form is the one with class active
$currentForm = $form_wrapper.children('form.active'),
//the change form links
$linkform = $form_wrapper.find('.linkform');

//get width and height of each form and store them for later
$form_wrapper.children('form').each(function(i){
var $theForm = $(this);
//solve the inline display none problem when using fadeIn fadeOut
if(!$theForm.hasClass('active'))
$theForm.hide();
$theForm.data({
width : $theForm.width(),
height : $theForm.height()
});
});

//set width and height of wrapper (same of current form)
setWrapperWidth();

/*
clicking a link (change form event) in the form
makes the current form hide.
The wrapper animates its width and height to the 
width and height of the new current form.
After the animation, the new form is shown
*/
$linkform.bind('click',function(e){
var $link = $(this);
var target = $link.attr('rel');
$currentForm.fadeOut(400,function(){
//remove class active from current form
$currentForm.removeClass('active');
//new current form
$currentForm= $form_wrapper.children('form.'+target);
//animate the wrapper
$form_wrapper.stop()
 .animate({
width : $currentForm.data('width') + 'px',
height : $currentForm.data('height') + 'px'
 },500,function(){
//new form gets class active
$currentForm.addClass('active');
//show the new form
$currentForm.fadeIn(400);
 });
});
e.preventDefault();
});

function setWrapperWidth(){
$form_wrapper.css({
width : $currentForm.data('width') + 'px',
height : $currentForm.data('height') + 'px'
});
}

/*
for the demo we disabled the submit buttons
if you submit the form, you need to check the 
which form was submited, and give the class active 
to the form you want to show
*/
$form_wrapper.find('input[type="submit"]')
 .click(function(e){
e.preventDefault();
 });
});
        </script>
    </body>
</html>

解决方案 »

  1.   

    <form class="register" >
    method='post' 
      

  2.   

    既然你拷贝别人的,你在IE下,看看,IE的左下角是否会报黄标?
    应该是相关js没有。
      

  3.   


    <form class="login active" action="index.html">
    <h3>Login</h3>
    <div>
    <label>Username:</label>
    <input type="text" />
    <span class="error">This is an error</span>
    </div>
    <div>
    <label>Password: <a href="forgot_password.html" rel="forgot_password" class="forgot linkform">Forgot your password?</a></label>
    <input type="password" />
    <span class="error">This is an error</span>
    </div><div class="bottom">
    <input type="submit" value="Login"></input>
    <a href="register.html" rel="register" class="linkform">You don't have an account yet? Register here</a></div>
    </form>这个是你的登陆 login 的 form
    你看你跳到index.html去了,检察下你有没有这个html, 这个像是美工给的静态html页面。
      

  4.   

    你当前页面是不是index.html啊,是的话就是没有加登录处理的代码