在 Jquery 中隐藏和显示 div答案

【问题标题】：Hiding and showing div in Jquery在 Jquery 中隐藏和显示 div
【发布时间】：2013-06-18 10:33:36
【问题描述】：

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

【问题讨论】：

嗯，你不能把 DIV 放在 P 里面。

标签： javascript jquery html show-hide

【解决方案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();
    });
});

【讨论】：

Cotainer div 现在不显示。登录完全隐藏...它显示的空字符串传递给 getElementbyId 警告..
@Ash 检查我更新答案中的最后一个（使用toggle 选项）。

【解决方案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();
    });
 });

【讨论】：

【解决方案3】：

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

请查看jQuery docs for submit。

【讨论】：

【解决方案4】：

看demo

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

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

我相信你没有声明<div id="container" ></div>

在document.ready 函数内的document.ready 中编写您的脚本，以便它工作...

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

【讨论】：

【解决方案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 文档。

【讨论】：

【解决方案6】：

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

【讨论】：