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>

Answer 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();
});

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/

Answer 4

与上述答案类似：

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

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

Demo.

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();
 });

DEMO

Answer 6

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

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();
});

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>

在两个Div之间切换

8 个答案: