在Jquery中隐藏并显示div

Question

I want to Hide a div On a button click. Here I am having 2 divs (Login and container). When the page loads, container will be hidden. And On click on a #submit button, I want to show the container div and hide the Login div.

The problem is Now login page is showing when the page loads, but After clicking the button I cannot make the div hide or show

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

Write your code in document.ready function so it work,

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

or, its shorthand,

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

for changing its visibility every time you can use toggle() function like,

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

Answer 2

See if this is the issue, you have not a closing </div> tag here:

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

put a closing </div> above.

and try putting your script in doc ready :

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

Answer 3

Look on the demo

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

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

I believe that you not declare the <div id="container" ></div>

Write your script in document.ready inside the <script> function so it work...

Or you can't declare the library of 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

As it is a submit button handling the forms, submit event might be more useful. In this way you can validate and prevent from submitting.

Please check the jQuery docs for submit .

Answer 5

Your 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>

Your Jquery

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

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

Upon page loads, the login div will hide and if you click the sign in then login div will just fade in. If the user clicks the submit button, before you hide the login div, make sure you will validate the user action. Refer to jquery documentation for further explanation.

Answer 6

不是提交按钮导致回发，因此您失去了由javascript设置的CSS样式。