在两个Div之间切换 [英] Toggle Between two Divs

问题描述

我在使用两个div之间的JQuery进行一些切换效果时遇到了问题。我在jQuery上的表现很差。根据这些知识，我没有在两个div之间切换。

I am facing a Problem in making Some Toggle Effect with JQuery between Two divs . I am at very poor level on jQuery. and with that knowledge I failed to make to toggle between two divs .

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

Current code in JS fiddle : http://jsfiddle.net/WSCBu/

我有三个班级名称蓝色，灰色和橙色。我想要做的是：当页面加载时只有两个div蓝色和灰色将显示，当我单击灰色div上的文本显示灰色div将隐藏和橙色Div将显示。当我点击橙色div中的隐藏文本时，这个橙色div将隐藏并再次显示灰色div。可以用切换功能完成吗？我真的不确定怎么样。希望专家可以轻松一个！如果有人向我展示这个过程，我将非常感激。

I have Three Divs Class name Blue , Gray and orange . What I am trying to make is : when page loads Only two div Blue and Gray will Show and when I click the Text "Show" on Gray div The gray div will Hide and Orange Div will show . and When I click "Hide" text in Orange div this Orange div will Hide and again will show Gray div . May be it can be done with toggle function ? I am really not sure how . Hope for the Experts it may easy one ! I will very thankful if anyone Show me the process .

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

推荐答案

正如您猜测的那样， toggle（）将完成这项工作。当点击 .gray 或 .orange 时，我们切换两者的可见性：

As you guessed, toggle() will do the job. When either .gray or .orange is clicked, we toggle the visibility of both:

$('.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>

这篇关于在两个Div之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！