Question

我想隐藏div按钮单击。这里我有2个div（登录和容器）。页面加载时，容器将被隐藏。然后单击#submit按钮，我想显示容器div并隐藏Login 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

查看demo

$('#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 docs for 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样式。

在Jquery中隐藏和显示div

6 个答案: