javascript - 单击以隐藏每个 div 并在 jquery 中显示另一个 div

Question

我是 jQuery 新手。试图隐藏第一个 div 并显示第二个 div。当我再次点击第二个 div 时，它会显示第一个 div。

这是我的代码。

$(".c1").on('click', function() {
  $(".one").fadeIn();
  $(".two").fadeOut();
});
$(".c2").on('click', function() {
  $(".two").fadeIn();
  $(".one").fadeOut();
});

.right {
  font-size: 20px;
  float: right;
  margin-right: 50px;
}

.ab-container {
  margin-bottom: 50px;
}

.container {
  padding: 30px 60px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="ab-container one">
    <div class="ab-head">
      <h1>This is div 1 <a href="" class="right c1"> Click to see div 2</a></h1>
    </div>
    <div class="ab-content">
      <p>In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate </p>
    </div>
  </div>
  <div class="ab-container two">
    <div class="ab-head ">
      <h1>This is div 2 <a href="" class="right c2"> Click to see div 1</a></h1>
    </div>
    <div class="ab-content">
      <p>Replacing meaningful content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
    </div>
  </div>
</div>

Answer 1

• 您的 fadeOut 和 fadeIn 调用已反转。
• 您需要防止 a 链接行为。
• 将您的 fadeIn 调用作为回调传递。

查看带有这些修复的代码片段

我添加了一个hide 类来显示 DIV 如何出现和消失。

$(".c1").on('click', function(e) {
  e.preventDefault();
  $(".one").fadeOut(function() {
    $(".two").fadeIn();
  });  
});

$(".c2").on('click', function(e) {
  e.preventDefault();
  $(".two").fadeOut(function() {
    $(".one").fadeIn();
  });  
});

.right {
  font-size: 20px;
  float: right;
  margin-right: 50px;
}

.ab-container {
  margin-bottom: 50px;
}

.container {
  padding: 30px 60px;
}

.hide {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="ab-container one">
    <div class="ab-head">
      <h1>This is div 1 <a href="" class="right c1"> Click to see div 2</a></h1>
    </div>
    <div class="ab-content">
      <p>In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate </p>
    </div>
  </div>
  <div class="ab-container two hide">
    <div class="ab-head ">
      <h1>This is div 2 <a href="" class="right c2"> Click to see div 1</a></h1>
    </div>
    <div class="ab-content">
      <p>Replacing meaningful content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
    </div>
  </div>
</div>

看到了吗？现在正在按照您的逻辑行事!