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

Question

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

这是我的代码。

＆＃13;

＆＃13;

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

＆＃13;

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

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

.container {
  padding: 30px 60px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

• 您的fadeOut和fadeIn电话已被倒置。
• 您需要prevent 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>

请参阅？现在正在运用你的逻辑！

Answer 2

首先，如果您使用跨度而不是链接

，它会更好

nyou有fadein / fadeout的顺序混淆：

$(".c1").on('click', function() {
  $(".two").fadeIn();
  $(".one").fadeOut();
});
$(".c2").on('click', function() {
  $(".one").fadeIn();
  $(".two").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 <span class="right c1"> Click to see div 2</span></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 <span class="right c2"> Click to see div 1</span></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 3

您的代码正常运行，您只需从strtok代码中删除strtol即可。但是，如果您想看一下，这是我的方法。以及HTML的编辑版本

href=""

<a>