用一個切換三個div

Question

我正在做什么：我有三個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_4與BOX_1_CONTENT交換），然后立即單擊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>

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

});