Question

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>

除Contact div之外，每个div都工作正常，我无法识别原因。

实时错误：www.jibranyousuf.com

尽管页面仅在我单击“联系我们”时显示，但您会在页面加载时看到联系表。

Answer 1

据我所知，我不知道我是否很好地理解了这个问题，您所有的div在style.css文件中都包含一个display: none，因此它们隐藏在页面应用程序中，但是“联系人” div在style.css中没有此“显示：无”，他没有类别，例如“关于” 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;
}

对不起我的英语

fadeIn（）和fadeOut（）部分起作用，无法隐藏div

1 个答案: