在两个 div 之间切换 [关闭]答案

【问题标题】：Toggle Between two Divs [closed]在两个 div 之间切换 [关闭]
【发布时间】：2013-08-07 17:53:24
【问题描述】：

我在使用 JQuery 在两个 div 之间制作一些切换效果时遇到了问题。我在 jQuery 上的水平很差。并且有了这些知识，我无法在两个 div 之间切换。

JS fiddle 中的当前代码： http://jsfiddle.net/WSCBu/

我有三个 Div 类名称 Blue 、 Gray 和 orange 。我要做的是：当页面加载时，只有两个 div 蓝色和灰色会显示，当我单击灰色 div 上的文本“显示”时，灰色 div 将隐藏，橙色 Div 将显示。并且当我单击 Orange div 中的“隐藏”文本时，此 Orange div 将 Hide 并再次显示 Gray div 。可以用切换功能来完成吗？我真的不知道怎么做。希望高手能轻松一下！如果有人告诉我这个过程，我将非常感激。

这里是 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;     
 }

【问题讨论】：

标签： javascript jquery

【解决方案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>

【讨论】：

我最喜欢这个。我会将display:none 放在.orange 的css 中，使用.click()，确保它是.orange p 和.gray p 以满足要求。我也会让光标成为一个指针，这样它就更明显了。例如：jsfiddle.net/N6eB6/3

【解决方案2】：

DEMO

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

.toggle() 的短代码

DEMO

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

【讨论】：

完美！非常感谢

【解决方案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/

【讨论】：

【解决方案4】：

类似于上面的答案：

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

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

Demo.

【讨论】：

【解决方案5】：

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

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

DEMO

【讨论】：

它的工作非常出色......

【解决方案6】：

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

【讨论】：

【解决方案7】：

给两个div添加一个class 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();
});

【讨论】：

【解决方案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>

【讨论】：