在两个Div之间切换

Question

我在两个div之间使用JQuery进行一些切换效果时遇到了问题.我在jQuery上的表现很差.凭借这些知识,我无法在两个div之间切换.

JS小提琴中的当前代码: http://jsfiddle.net/WSCBu/

我有三个班级名称蓝色,灰色和橙色.我想要做的是:当页面加载时只有两个div蓝色和灰色将显示,当我单击灰色div上的文本"显示"灰色div将隐藏和橙色Div将显示.当我点击橙色div中的"隐藏"文本时,这个橙色div将隐藏并再次显示灰色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;     
 }

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>