在javascript中切換面板的更好方法是什麼？

我有一些代碼在按下按鈕時交換面板，在顯示下一個按鈕之前隱藏屏幕上可能出現的其他代碼。它有點混亂，因爲它必須採取措施防止兩個面板同時出現。在javascript中切換面板的更好方法是什麼？

$(document).ready(function() { 
    $("#pref-sliders-swap").appendTo($("#sliderbox")); 
    $("#sliderbox").hide(); 
    $("#characters").hide(); 
    $("#currentdesires").hide(); 
    $("#important").hide(); 

    $("#sliderbutton").click(function() { 
     $("#welcome").fadeOut(function() { 
      $("#characters").fadeOut(function() { 
       $("#currentdesires").fadeOut(function() { 
        $("#important").fadeOut(function() { 
         $("#sliderbox").fadeIn(); 
        }); 
       }); 
      }); 
     }); 
    }); 

    $("#homebutton").click(function() { 
     $("#sliderbox").fadeOut(function() { 
      $("#characters").fadeOut(function() {  
       $("#currentdesires").fadeOut(function() { 
        $("#important").fadeOut(function() { 
         $("#welcome").fadeIn(); 
        }); 
       }); 
      }); 
     }); 
    }); 

    $("#charactersbutton").click(function() { 
     $("#sliderbox").fadeOut(function() { 
      $("#welcome").fadeOut(function() { 
       $("#currentdesires").fadeOut(function() { 
        $("#important").fadeOut(function() { 
         $("#characters").fadeIn(); 
        }); 
       }); 
      }); 
     }); 
    });  

    $("#desirebutton").click(function() { 
     $("#sliderbox").fadeOut(function() { 
      $("#welcome").fadeOut(function() { 
       $("#characters").fadeOut(function() { 
        $("#important").fadeOut(function() { 
         $("#currentdesires").fadeIn(); 
        }); 
       }); 
      }); 
     }); 
    }); 

    $("#impbutton").click(function() { 
     $("#sliderbox").fadeOut(function() { 
      $("#welcome").fadeOut(function() { 
       $("#characters").fadeOut(function() { 
        $("#currentdesires").fadeOut(function() { 
         $("#important").fadeIn(); 
        }); 
       }); 
      }); 
     }); 
    }); 

});

我已經擺在那裏不正是我想要的東西，（至少在Firefox），雖然這是一個有點麻煩順利淡入淡出面板的代碼。有沒有更好的方法來達到相同的效果？

來源

2014-01-16 ZCoder

哪裏是你的HTML？如果沒有合適的HTML，你還可以分享嗎？ –

。考慮把它放在jsfiddle.net而不是pastebin中。 – Jorg

也發佈您的代碼在問題 –

嘗試

<!--use the class trigger to group the trigger elements, then use data-target to specify the id of the target element to be displayed--> 
<div id="sliderbutton" data-target="#sliderbox" class="trigger">sliderbutton</div> 
<div id="homebutton" data-target="#welcome" class="trigger">homebutton</div> 
<div id="charactersbutton" data-target="#characters" class="trigger">charactersbutton</div> 
<div id="desirebutton" data-target="#currentdesires" class="trigger">desirebutton</div> 
<div id="impbutton" data-target="#important" class="trigger">impbutton</div> 

<!--Use the class content to group all the content elements--> 
<div id="sliderbox" class="content">sliderbox</div> 
<div id="characters" class="content">characters</div> 
<div id="currentdesires" class="content">currentdesires</div> 
<div id="important" class="content">important</div> 
<div id="welcome" class="content">welcome</div>

然後

jQuery(function() { 
    $("#pref-sliders-swap").appendTo("#sliderbox"); 
    $(".content").not('#welcome').hide(); 

    var $contents = $('.content'); 
    $contents.not('#welcome').hide(); 

    $(".trigger").click(function() { 
     var $visible = $contents.stop(true, true).filter(':visible'), 
      $target = $($(this).data('target')).stop(true, true); 
     if ($visible.length) { 
      $visible.fadeOut(function() { 
       $target.fadeIn(); 
      }); 
     } else { 
      $target.fadeIn(); 
     } 
    }); 

})

演示：Fiddle

來源

2014-01-16 04:12:19

在javascript中切換面板的更好方法是什麼？

回答

相關問題