fadeIn () и fadeOut () работают частично, не в состоянии скрыть div - PullRequest
0 голосов
/ 01 ноября 2018

var $a = $('.a'),
  $b = $('.b'),
  $c = $('.c'),
  $d = $('.d'),
  $home = $('.home'),
  $about = $('.about'),
  $gallery = $('.gallery'),
  $contact = $('.contact');

$a.click(function() {
  $home.fadeIn();
  $about.fadeOut();
  $gallery.fadeOut();
  $contact.fadeOut();
});
$b.click(function() {
  $about.fadeIn();
  $home.fadeOut();
  $gallery.fadeOut();
  $contact.fadeOut();
});
$c.click(function() {
  $gallery.fadeIn();
  $about.fadeOut();
  $contact.fadeOut();
  $home.fadeOut();
});
$d.click(function() {
  $contact.fadeIn();
  $about.fadeOut();
  $home.fadeOut();
  $gallery.fadeOut();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contact">
  <div class="contactForm">
    <form action="index.html" method="post">
      <input type="text" class="inputText" name="" value="First Name">
      <input type="text" class="inputText" name="" value="Last Name">
      <input type="text" class="inputText" name="" value="Your Email">
      <textarea class="inputMessage" name="" id="" cols="4" rows="6">Your Message</textarea>
      <input class="submitButton" type="button" name="" value="Submit">
    </form>
  </div>
</div>

Каждый div работает нормально, кроме контактного div, и я не могу понять почему.

Ошибка в реальном времени: www.jibranyousuf.com

Вы увидите контактную форму при загрузке страницы, хотя она должна отображаться только после того, как я нажму Связаться с нами.

1 Ответ

0 голосов
/ 01 ноября 2018

я не знаю, правильно ли я понял вопрос, насколько я могу судить, все ваши div содержат display: none в файле style.css, поэтому они скрыты в приложении страницы, но "контакт" У div нет этого «display: none» в style.css, у него нет класса, например «about» div:

.about{
    position: absolute;
    right: 0;
    top: 10px;
    color: black;
    font-family: century 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    padding: 0 60px;
    display: none;
}

попробуйте добавить это в свой файл style.css:

.contact{
    display: none;
}

Извините за мой английский

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...