切换三个div与一个

我在做什么：我有三个DIV，他们每个人作为一个按钮交换一个div与不同的内容。切换三个div与一个

[BOX_1] [BOX_2] [BOX_3] [-------- BOX_4 ------------]

例如： 如果点击BOX_1，它交换BOX_4出与BOX_1_CONTENT &（点击BOX_1再次返回到BOX_4）如果单击BOX_2，它交换BOX_4出与BOX_2_CONTENT &（点击BOX_2再次返回到BOX_4）如果单击BOX_3，它交换BOX_4出来与BOX_3_CONTENT &（单击BOX_3再次将其返回到BOX_4）

将BOX_1_CONTENT，BOX_2_CONTENT和BOX_3_CONTENT全部设置为显示：无;并在点击后出现。

什么工作： 它的伟大工程，如果你只（通过点击BOX_1来回切换，即内容）的来回切换的烦恼。

我的问题： 我遇到了麻烦点击BOX_1，然后再切换回来，点击BOX_2或BOX_3。

看来我需要一种处理场景的方法，例如：单击BOX_1（与BOX_1_CONTENT交换BOX_4），然后立即单击BOX_3并使其与BOX_3_CONTENT交换BOX_1_CONTENT。

任何建议更好的方式来做到这一点？

<script> 
$(document).ready(function(){ 
    $(".BOX_1").click(function() 
    {   
     $('.BOX_4, .BOX_1_CONTENT').fadeToggle("slow"); 
    }); 

     $(".BOX_2").click(function() 
    {   
     $('.BOX_4, .BOX_2_CONTENT').fadeToggle("slow"); 
    }); 

     $(".BOX_3").click(function() 
    {   
     $('.BOX_4, .BOX_3_CONTENT').fadeToggle("slow"); 
    }); 

}); 
</script>

来源

2017-06-15 Alex H

做üHV这个任何的jsfiddle或财产以后？ –

是的，对不起：这是一个jsfiddle显示我的问题：https://jsfiddle.net/s1e0tb93/1/ –

这是你的寻找：

HTML：

<div class="BOX_1">BOX 1</div> 

<div class="BOX_2"> 
BOX 2 
</div> 

<div class="BOX_3"> 
BOX 3 
</div> 

<!-- data-content is to check do we have content or which boxes's content do we hv now --> 
<div class="BOX_4" data-content="">BOX 4 (CONTENT TO BE REPLACED)</div> 

<div class="BOX_1_CONTENT">CONTENT FOR BOX 1</div> 
<div class="BOX_2_CONTENT">CONTENT FOR BOX 2</div> 
<div class="BOX_3_CONTENT">CONTENT FOR BOX 3</div>

JS：

$(document).ready(function(){ 
    var b4c = $('.BOX_4').html(); // content of box 4 so that we cn refer to it later 
    $(".BOX_1,.BOX_2,.BOX_3").click(function() 
    { 
     var active_content = $(".BOX_4").data('content'); 
     var cls = $(this).attr('class'); 
     if(active_content == '') 
     { 
     $(".BOX_4").html($("."+cls+'_CONTENT').html()) 
     $(".BOX_4").data('content',cls); 
     } 
     else 
     { 
     if(active_content == cls) 
     { 
      $('.BOX_4').html(b4c).data('content',''); 
      } 
      else 
      { 
      $(".BOX_4").html($("."+cls+'_CONTENT').html()) 
       $(".BOX_4").data('content',cls); 
      } 
     } 
    }); 

});

来源

2017-06-15 19:52:27

完美！谢谢！ –

欢迎您:) 我很高兴我能够帮助:) –

如果有人想在行动中看到它：https：//jsfiddle.net/8u1wxw01/1/ –

切换三个div与一个

回答

相关问题