Скрытие и отображение div в JQuery

Question

Я хочу скрыть div Нажав кнопку. Здесь у меня есть 2 divs (Вход и контейнер). Когда страница загружается, контейнер будет скрыт. И Нажав на кнопку #submit, я хочу показать контейнер div и скрыть логин Login.

Проблема заключается Теперь войдите страница показывает при загрузке страницы, но после нажатия кнопки я не могу сделать 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

Посмотрите на 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 3

Поскольку это кнопка отправки, обрабатывающая формы, отправьте событие может быть более полезным. Таким образом, вы можете подтвердить и предотвратить отправку.

Пожалуйста, проверьте jQuery docs for submit.

Answer 4

Не кнопка отправки, вызывающая обратную передачу, и, таким образом, вы теряете стиль CSS, установленный javascript.

Answer 5

Смотрите, если это вопрос, вы не закрывающий тег </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 6

Ваш 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 просто затухает. Если пользователь нажимает кнопку отправки, перед тем как скрыть login div, убедитесь, что вы проверите действие пользователя.Дополнительную информацию см. В документации по jQuery.