javascript - 在 Jquery 中隐藏和显示 div

Question

我想在单击按钮时隐藏 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>

Answer 1

写下你的代码，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();
    });
});

Answer 2

看看这是否是问题所在，这里没有结束</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();
    });
 });

Answer 3

看演示

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

    $('#container').show();
    $('#login').hide();
})

我相信你没有宣布<div id="container" ></div>

将您的脚本写入函数document.ready内部，<script>使其工作......

或者你不能声明 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" />

Answer 4

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

请检查jQuery 文档的 submit。

Answer 5

你的 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>

你的jQuery

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

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

页面加载后，登录 div 将隐藏，如果您单击登录，则登录 div 将淡入。如果用户单击提交按钮，在隐藏登录 div 之前，请确保您将验证用户操作。请参阅 jquery 文档以获取更多说明。

Answer 6

提交按钮不会导致回发，因此您会丢失由 javascript 设置的 css 样式。