在两个 Div 之间进行切换

Question

我遇到了一个问题，需要用jQuery实现两个div之间的切换效果。我在jQuery方面的水平很低，所以无法实现这个功能。

JSFiddle上的当前代码： http://jsfiddle.net/WSCBu/

我有三个div，它们的类名分别是Blue、Gray和Orange。我想实现的功能是：当页面加载时，只显示Blue和Gray两个div；当我点击Gray div上的“Show”文字时，Gray div会被隐藏，而Orange div会显示出来；当我在Orange div上点击“Hide”文字时，Orange div会被隐藏，然后再显示Gray div。也许可以用toggle函数来实现这个功能？但我真的不确定该怎么做。希望专家们能帮助解决这个问题！如果有人能向我展示实现的过程，我将非常感激。

以下是HTML代码：

<div class="blue"></div>
<div class="gray">
  <p> Show --> </p>
</div>
<div class="orange">
  <p> -- Hide </p>
</div>

Css

.blue{

height:100px;
width:250px;
background:#1ecae3;
float:left;
}
 .gray{

height:100px;
width:100px;
background:#eee;
float:left;    
 }

  .orange{
  height:100px;
  width:150px;
  background:#fdcb05;
  float:left;     
 }

- S Raihan

Answer 1

正如您所猜测的那样，toggle()会完成任务。 当单击.gray或.orange时，我们切换两者的可见性：

$('.orange').hide();

$('.gray, .orange').on(
  'click',
  function() 
  {
    $('.gray, .orange').toggle()
  }
);

$('.orange').hide();
$('.gray, .orange').on('click',
  function() {
    $('.gray, .orange').toggle()
  }
);

.blue {
  height: 100px;
  width: 250px;
  background: #1ecae3;
  float: left;
}

.gray {
  height: 100px;
  width: 100px;
  background: #eee;
  float: left;
}

.orange {
  height: 100px;
  width: 150px;
  background: #fdcb05;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blue"></div>
<div class="gray">
  <p>Show --></p>
</div>
<div class="orange">
  <p>-- Hide</p>
</div>

- Paul Roub

---

我最喜欢这个。我会在CSS中为.orange添加"display:none"，使用.click()，确保它是.orange p和.gray p以符合要求。我还会将光标设置为指针，以使其更加明显。例如：http://jsfiddle.net/N6eB6/3/ - Gray

Answer 2

演示

$('.orange').hide();
$('.gray p').click(function(){
    $('.gray').hide();
    $('.orange').show();
});
$('.orange p').click(function(){
    $('.gray').show();
    $('.orange').hide();
});

使用.toggle()可以缩短代码

演示

$('.orange').hide();
$('.gray p,.orange p').click(function(){
    $('.gray,.orange').toggle();
});

- Tushar Gupta - curioustushar

Answer 3

使用以下js代码:

jQuery('.gray').click(function(){
   jQuery(this).hide();
   jQuery('.orange').show();     
});
jQuery('.orange').click(function(){
jQuery(this).hide();
   jQuery('.gray').show();    
});

这里是可工作的代码片段：http://jsfiddle.net/WSCBu/6/

- Nishu Tayal

Answer 4

类似于上面的答案：

$('.gray').click(function () {
    $(this).toggle();
    $('.orange').toggle();
});

$('.orange').click(function () {
    $(this).toggle();
    $('.gray').toggle();
});

演示。

- Icarus

Answer 5

$(".gray").click(function(){
$(".gray").toggle();
      $(".orange").show();
  });
$(".blue").click(function(){
$(".blue").toggle();
      $(".orange").show();

 });
$(".orange").click(function(){
    $(".blue").toggle();
    $(".gray").toggle();
    $(".orange").toggle();
 });

演示

- Vaibs_Cool

---

它运行得非常出色... - user2454606

Answer 6

    $('.orange').hide();    
    $(".gray p").click(function(){
          $(".gray").hide();
          $(".orange").show();
    })
    $(".orange p").click(function(){
          $(".orange").hide();
          $(".gray").show();
    })

- Mangesh Parte

Answer 7

在这两个 div 中添加一个名为“show”的类，然后可以使用 toggle 方法。示例 http://jsfiddle.net/WSCBu/21/ 在此处显示。

<div class="blue"></div>
<div class="gray show" style="display:none";>
 <p> Show --> </p>
</div>
<div class="orange show">
 <p> -- Hide </p>
</div>

$(document).on('click','.show',function(){
  $('.show').toggle();
});

- V31

Answer 8

我猜这应该是以下代码一样简单。请原谅代码对齐。我是用手机回答的 :)

<style>
.blue{

height:100px; width:250px; background:#1ecae3; float:left; } 

.gray{

height:100px; width:100px; background:#eee; float:left; }

.orange{ height:100px; width:150px; background:#fdcb05; float:left; display:none;}
</style>

 <div class="blue"></div>
 <div class="gray"> <p> Show --> </p> </div>
 <div class="orange"> <p> -- Hide </p> </div>

<script>
$(".gray p").click(function() {
$(".gray").hide();
$(".orange").show();
});

 $(".orange p").click(function() {
 $(".gray").show()
 $(".orange").hide();
 } );
 </script>

- Faisal Mq