Приховування та показує розділ у Jquery

Я хочу сховати розділ на клацання кнопкою миші. Тут я маю 2 divs (Увійти та контейнер). Коли сторінка завантажується, контейнер буде приховано. І натиснувши кнопку #submit, я хочу показати контейнер div і приховати Увійти div.

Проблема поля "Вхід на сторінку" тепер відображається, коли сторінка завантажується, але після натискання кнопки я не можу зробити розділ "ховатись" або "показати"

Javascript:

<script>
    $('#submit').click(function() {
        console.log("Called2")

        $('#container').show();
        $('#login').hide();
    });
</script>

HTML:

<div id="login" >
    <div id="loginformcontainer">
        <form>
            
            
            <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;">
                
Index Page

</div>
0
Ви не можете поставити DIV всередині П.
додано Автор Derek S. Henderson, джерело

6 Відповіді

Напишіть свій код у функції document.ready , щоб він працював,

$(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(){
    $('#submit').click(function() {
       console.log("Called2")
       $('#container, #login').toggle();
    });
});
1
додано
@Ash Перевірте останню в моїй оновленої відповіді (за допомогою опції toggle ).
додано Автор Rohan Kumar, джерело
Cotainer div зараз не відображається. Логін ідеально приховується ... Вона показує порожню рядок, передану getElementbyId Warning ..
додано Автор Ash, джерело
Дякую Роган !!! Це працює зараз .. контейнер класу ..
додано Автор Ash, джерело

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();
    });
 });
1
додано

Не є кнопкою надсилання, що викликає зворотний зв'язок, і таким чином ви втрачаєте CSS-стиль, встановлений за допомогою JavaScript.

1
додано
Це коментар.
додано Автор Derek S. Henderson, джерело

Оскільки це кнопка надсилання, обробка форм, подання події може бути більш корисною. Таким чином ви можете перевірити та заборонити подання.

Будь ласка, перевірте документи jQuery для надсилання .

0
додано

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" />
0
додано

Ваш html

 <div id="signIn" >Sign In</div>
<div id="login" >
<div id="loginformcontainer">

                <form>
                    
                    
                    <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.

0
додано
ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram