8

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

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

我有三个 Divs 类名称 Blue ， Gray 和 orange 。我要做的是：当页面加载时，只有两个 div 蓝色和灰色会显示，当我单击灰色 div 上的文本“显示”时，灰色 div 将隐藏，橙色 div 将显示。并且当我单击橙色 div 中的“隐藏”文本时，此橙色 div 将隐藏并再次显示 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;     
 }
4

8 回答 8

24

如您所料，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>

于 2013-08-07T18:01:07.380 回答
3

演示

$('.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();
});
于 2013-08-07T17:58:24.093 回答
0

在两个 div 中添加一个类 show 然后就可以使用切换方法了。此处显示的示例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();
});
于 2013-08-07T18:08:19.597 回答
0

我想它应该像下面的代码一样简单。请原谅代码对齐。用我的手机回答:)

<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>
于 2013-08-07T18:22:06.840 回答
0

使用以下 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/

于 2013-08-07T17:58:45.140 回答
0

类似于上面的答案：

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

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

演示。

于 2013-08-07T17:59:18.563 回答
0 
$(".gray").click(function(){
$(".gray").toggle();
      $(".orange").show();
  });
$(".blue").click(function(){
$(".blue").toggle();
      $(".orange").show();

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

演示

于 2013-08-07T17:59:18.703 回答
0 
    $('.orange').hide();    
    $(".gray p").click(function(){
          $(".gray").hide();
          $(".orange").show();
    })
    $(".orange p").click(function(){
          $(".orange").hide();
          $(".gray").show();
    })
于 2013-08-07T17:59:57.223 回答