用一个切换三个div

Question

我在做什么：我有三个 DIV，每个都充当一个按钮来交换一个 div 与不同的内容。

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

例如： 如果您单击 BOX_1，它会将 BOX_4 替换为 BOX_1_CONTENT &（再次单击 BOX_1 returns 将其替换为 BOX_4）如果您单击 BOX_2，它会将 BOX_4 换成 BOX_2_CONTENT &（再次单击 BOX_2 returns 将其替换为 BOX_4）如果您单击 BOX_3，它会将 BOX_4 换成 BOX_3_CONTENT &（再次单击 BOX_3 returns 将其替换为 BOX_4）

BOX_1_CONTENT、BOX_2_CONTENT、BOX_3_CONTENT都设置为display:none；并在点击后出现。

什么有效： 如果您只是来回切换（即通过来回单击 BOX_1 来切换内容），它会很好用。

我的问题： 我无法处理单击 BOX_1 然后在切换回来之前单击 BOX_2 或 BOX_3。

看来我需要一种方法来处理以下情况：单击 BOX_1（将 BOX_4 与 BOX_1_CONTENT 交换），然后立即单击 BOX_3 并具有它将 BOX_1_CONTENT 与 BOX_3_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>

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

});

用一个切换三个div

Toggling three divs with one

javascript

jquery

show

toggle

hide