0

我在一个网页中有一个登录页面和一个注册页面。页面底部有两个按钮，我想用它们交换页面。请参阅我的编码 - 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 代码。

4

1 回答 1

0

You should not change the ids. But change the class attribute.

Moreover if you want to hide a div. You may consider to do that with Jquery .hide() method like in the following code (or see my updates 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>

And update your CSS with that:

#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: you forget the last </div> in your jsfiddle. And you should not put the <script></script> element in the jsfiddle's javascript window.

于 2013-03-23T15:40:19.880 回答