0

1 つの Web ページにログイン ページとサインアップ ページがあります。ページの下部に、ページを切り替えたいボタンが 2 つあります。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

ID を変更しないでください。しかし、クラス属性を変更してください。

さらに、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:</div> jsfiddleの最後を忘れています。<script></script>また、要素をjsfiddleのjavascriptウィンドウに配置しないでください。

于 2013-03-23T15:40:19.880 に答える