Javascript 在Jquery中隐藏和显示div

我想在单击按钮时隐藏一个div。这里我有两个div（Login和container）。当页面加载时，容器将被隐藏。单击#submit按钮，我想显示container div并隐藏Login div

问题是现在登录页面在页面加载时显示，但单击按钮后，我无法使div隐藏或显示

Javascript:

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

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

$（“#提交”）。单击（函数（）{
console.log（“Called2”）
$（“#容器”）.show（）；
$（'#login'）.hide（）；
});

HTML:

用户名：
密码：
提交
清除所有
索引页

在

document.ready函数中编写代码，使其正常工作

$(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(){
    $('#submit').click(function() {
       console.log("Called2")
       $('#container, #login').toggle();
    });
});

看

我相信您没有申报

在
文档中编写脚本。在
函数中准备好
，使其正常工作

或者您不能声明Jquery库

<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

因为它是一个处理表单的提交按钮，所以提交事件可能更有用。通过这种方式，您可以验证并阻止提交

请检查。
不是“提交”按钮导致回发，因此您失去了javascript设置的css样式。
如果这是问题所在，您没有关闭标签：

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

你的html

 <div id="signIn" >Sign In</div>
<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将隐藏，如果单击登录，则登录div将淡入。如果用户单击submit按钮，在隐藏login div之前，请确保验证用户操作。请参阅jquery文档以了解更多说明。
现在不显示Cotainer div。登录是完全隐藏。。。它显示传递给getElementbyId的空字符串警告。@Ash检查我更新答案中的最后一个（使用
切换
选项）。嗯，你不能在P中放置DIV。
   </div>
   <div> //<----------------here you can see an opening tag instead
      <div id="container" style="display: none;">

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

 <div id="signIn" >Sign In</div>
<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>

 $('#login').hide();
    $('#signIn').click(function() {
        alert("try");
    });

    $("#submit").click(function() { 
         $('#login').fadeOut();
        //do your code
    });