jQuery: Скрыть div. После нажатия кнопки показать, что div и скрыть еще один

Мое понятие таково: Существует div-1 и div-2. div-2 будет скрыт, и на дисплее отобразится div-1. Существует button в показанном div-1. После нажатия buttondiv-1 будет скрыт, и на экране отобразится div-2.jQuery: Скрыть div. После нажатия кнопки показать, что div и скрыть еще один

Вот мой код:

<div id="report-medicine"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-6 col-md-offset-3"> 
       <h3>REPORT A SUSPICIOUS MEDICINE</h3> 
       <form> 
        <div class="form-group medicine-information"> 
         <textarea type="text" class="" placeholder="Tell Us About The Fake Medicine..."></textarea> 
         <button class="btn">Next</button> 
        </div> 

        <div class="user-information"> 
         <div class="form-group"> 
          <input type="text" class="form-control" placeholder="Your Name"> 
         </div> 
         <div class="form-group"> 
          <input type="text" class="form-control" placeholder="Phone Number"> 
         </div> 
         <button type="submit" class="btn">Report</button> 
        </div> 

       </form> 
      </div> 
     </div> 
    </div> 
</div> 

<script> 
$(document).ready(function(){ 
    $(".user-information").hide(); 
    $(".btn").click(function(){ 
     $(".medicine-information").hide() 
     $(".user-information").show() 
    }); 
}); 
</script>

Но код не работает:/Пожалуйста, помогите мне, исправляя код.

источник

2015-03-26 Sakir

Вы включили jquery link? –

Да, в нижней части тела – Sakir

где находится html для 'medicine-inforamtion', вы можете поделиться им тоже –

У вас есть опечатки. Для быстрого исправления.

Заменить

$("medicine-inforamtion").hide(); 
    $(".user-information").show();

$(".medicine-information").hide(); 
    $(".user-information").show();

источник

2015-03-26 05:14:59

'$ (документ) .ready (функция() { \t $ (» пользователь-информация. ") Скрыть();.". БТН " $() нажмите (функция() { \t $ (". ( }); }); ' Все еще не работает – Sakir

Вам необходимо исправить написание« лекарство-информация »в разделе« Медицина-информация »). hide() $ (". user-information "). ваш html тоже. –

И вам, конечно, нужны ваши полуколоны (см. Править) –

Пожалуйста, используйте: -

$(".medicine-inforamtion").hide();

имя класса отличается
использование "" в селекторе выберите класс.

источник

2015-03-26 05:23:03

Вы используете форму действия в первом div .. поэтому страница обновляется. и у вас есть та же самая страница с textarea.try для использования Ajax Onclick

источник

2015-03-26 05:26:58

JQuery имеет встроенный метод переключения. В принципе, установите div, который вы хотите скрыть первым, чтобы отобразить: none; и затем переключаться между видимыми и скрытыми при нажатии кнопки.

$(document).ready(function() { 
 
    $("#toggle").click(function() { 
 
    $("#div1").toggle(); 
 
    $("#div2").toggle(); 
 
    }); 
 
});

.hidden { 
 
    display: none; 
 
} 
 
#div1 { 
 
    color: red; 
 
    border: 1px solid black; 
 
} 
 
#div2 { 
 
    color: blue; 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <div id="div1"> 
 
    <p>Hello</p> 
 
    </div> 
 
    <div id="div2" class="hidden"> 
 
    <p>World!</p> 
 
    </div> 
 
    <button id="toggle">Toggle</button> 
 
</body>

источник

2015-03-26 05:30:42 jtc

Использование переключателя не объясняет, почему он не работал в первую очередь. –

Проблема заключается в том, что ваша форма будет представлять автоматически, если вы используете <button> без установки явного типа.

Простое исправление:

<button class="btn" type="button">Next</button>

Это заставит кнопка не иметь поведение не по умолчанию, так что вы можете обрабатывать событие щелчка, не беспокоясь о том, что форма будет представлять. Learn more.

Demo

источник

2015-03-26 05:31:33

Ваш текущий код будет работать только на первый клик (один DIV будет скрыт другой показано). Но клики после этого будут просто продолжать скрывать скрытый div и показать, что он будет отображаться. К счастью, у jquery есть способ показать, скрыты ли они и спрятаться, если они показаны.Переключение

$(document).ready(function(){ 
    $(".user-information").hide(); 
    $(".btn").click(function(){ 
     $(".medicine-information").toggle() 
     $(".user-information").toggle() 
    }); 
});

источник

2015-03-26 05:32:43

Если вы сделаете это, перед отправкой формы он снова отобразит первый div. –

Put Jquery ссылку чуть выше сценария

Пожалуйста, замените это: -

<button class="btn">Next</button> 
<button type="submit" class="btn">Report</button>

с: -

<button type="button" class="btn">Next</button> 
<button type="button" class="btn">Report</button>

Так попробуйте этот код: -

<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <title></title> 
 
</head> 
 
<body> 
 
    <div id="report-medicine"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-md-6 col-md-offset-3"> 
 
       <h3>REPORT A SUSPICIOUS MEDICINE</h3> 
 
       <form> 
 
        <div class="form-group medicine-information"> 
 
         <textarea type="text" class="" placeholder="Tell Us About The Fake Medicine..."></textarea> 
 
         <button type="button" class="btn">Next</button> 
 
        </div> 
 

 
        <div class="user-information"> 
 
         <div class="form-group"> 
 
          <input type="text" class="form-control" placeholder="Your Name"> 
 
         </div> 
 
         <div class="form-group"> 
 
          <input type="text" class="form-control" placeholder="Phone Number"> 
 
         </div> 
 
         <button type="button" class="btn">Report</button> 
 
        </div> 
 

 
       </form> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
    <script> 
 
     $(document).ready(function() { 
 
      $(".user-information").hide(); 
 
      $(".btn").click(function() { 
 
       $(".medicine-information").hide() 
 
       $(".user-information").show() 
 
      }); 
 
     }); 
 
    </script> 
 
    
 
</body> 
 
</html>

источник

2015-03-26 05:44:09

Кнопки должны быть в форме. –

jQuery: Скрыть div. После нажатия кнопки показать, что div и скрыть еще один

ответ

Смежные вопросы