jQuery交换

Question

我在一个网页中有一个登录页面和一个注册页面。页面底部有两个按钮，我想用它们交换页面。请参阅我的编码 - http://jsfiddle.net/t6sr7/。它就像我的登录注册页面。它不起作用。请帮帮我..以下是我的jQuery代码： -

<script>
$(document).ready(function(){
  $("#inactive").click(function(){
    $("#inactive").removeAttr('id');
    $("#inactive").attr("id","active-swap");
    $("#active").attr("id","inactive");
    $("#active-swap").attr("id","active");


    $("#active-page").attr("id","inactive-page-swap",function(){
    $("#inactive-page").attr("id","active-page");
        $("#inactive-page-swap").attr("id","inactive-page");
        });
    });
});
</script>

请在jsFiddle中查看我的HTML和CSS代码。

Answer 1

您不应该更改ID。但是改变了class属性。

此外，如果你想隐藏一个div。您可以考虑使用Jquery .hide()方法执行此操作，如以下代码（或查看我的更新isfiddle）：

<script  language="javascript">
$(function(){
  $("#inactive-page").hide();
  $("#active").click(function(){
    $("#active").attr("class","login-modal");
    $("#active-page").show();
    $("#inactive").attr("class","signup-modal");
    $("#inactive-page").hide();
  });

$("#inactive").click(function(){
    $("#inactive").attr("class","login-modal");
    $("#inactive-page").show();
    $("#active").attr("class","signup-modal");
    $("#active-page").hide();
  });
});
</script>

并用以下内容更新您的CSS：

#bottom-modal{
    width:100%;
    border-top:1px solid #666;
    box-shadow:0px 1px #aaa inset;
    padding: 15px 0 0 0;
    font-size:14px;
    color:#3a3a3a;
    min-height:33px;
}

a{
    float:left;
    text-decoration:none;
    padding:5px;
    margin-left:39%;
    border-radius:5px;
    padding:5px;
}

.signup-modal{
    background:#00a5f0;
    border:1px solid #0084c0;
    color:#fff;
    outline:none; 
}

.login-modal{
    background-color:#e6e6e6;
    color:#808080;
    border:1px solid #d6d6d6;
    outline:none;
}

#active-swap{
    background:#00a5f0;
    border:1px solid #0084c0;
    color:#fff;
    outline:none;
}

#inactive:hover{
    background:#666;
    color:#fff;
}

#inactive:active{
    background:#333;
    color:#fff;
}

PS：你忘记了jsfiddle中的最后一个</div>。而且你不应该将<script></script>元素放在jsfiddle的javascript窗口中。