1

ボタンクリックでdivを非表示にしたい。ここでは、2 つの div (ログインとコンテナー) を使用しています。ページが読み込まれると、コンテナは非表示になります。#submit ボタンをクリックすると、コンテナ div を表示し、ログイン div を非表示にします。

問題は、ページの読み込み時にログインページが表示されるようになりましたが、ボタンをクリックした後、divを非表示または表示にできません

Javascript:

<script>
    $('#submit').click(function() {
        console.log("Called2")

        $('#container').show();
        $('#login').hide();
    });
</script>

HTML:

<div id="login" >
    <div id="loginformcontainer">
        <form>
            <label> Username:
                <input type="text" name="uname">
            </label>
            <label> Password:
                <input type="password" name="pwd">
            </label>
            <div class="buttons1">
                <button type="button" id="submit" value="Login" class="btn">
                    Submit
                </button>
                <button type="reset"  id="reset" value="Reset"  class="btn">
                    Clear All
                </button>
            </div>
            <div>
            <div id="container" style="display: none;">
                <p> Index Page</p>
                    </div>
4

6 に答える 6

2

動作するようにコードを記述しdocument.ready function、

$(document).ready(function(){
    $('#submit').click(function() {
       console.log("Called2")
       $('#container').show();
       $('#login').hide();
    });
});

または、その省略形、

$(function(){
    $('#submit').click(function() {
       console.log("Called2")
       $('#container').show();
       $('#login').hide();
    });
});

たとえばtoggle() function、

$(function(){
    $('#submit').click(function() {
       console.log("Called2")
       $('#container, #login').toggle();
    });
});
于 2013-06-21T10:19:12.240 に答える
1

これが問題かどうかを確認してください。ここには終了</div>タグがありません。

   </div>
   <div> //<----------------here you can see an opening tag instead
      <div id="container" style="display: none;">

上に締めを入れ</div>ます。

スクリプトを入れてみてくださいdoc ready：

 $(function(){
    $('#submit').click(function() {
      console.log("Called2")
      $('#container').show();
      $('#login').hide();
    });
 });
于 2013-06-21T10:28:33.987 に答える
0

フォームを処理する送信ボタンなので、送信イベントの方が便利かもしれません。このようにして、送信を検証して防止することができます。

submit については jQuery ドキュメントを確認してください。

于 2013-06-21T10:22:50.257 に答える
-1

ポストバックの原因となる送信ボタンではないため、javascript によって設定された css スタイルが失われています。

于 2013-06-21T10:23:39.650 に答える