請幫我簡化這個jQuery代碼

Question

我知道這個jQuery代碼的很大一部分是不必要的，特別是在重複的fadeOut和fadeIn事件中。

<script type='text/javascript'> 
     $(function(){ 
       $('.panel').hide(); 

       $('.work_button').click(function(){ 
        $('#cms,#contact').fadeOut(function(){ 
        $('#work').fadeIn(); 
        }); 
       }); 

       $('.cms_button').click(function(){ 
        $('#work,#contact').fadeOut(function(){ 
          $('#cms').fadeIn(); 
        }); 
       }); 

       $('.contact_button').click(function(){ 
        $('#cms,#work').fadeOut(function(){ 
          $('#contact').fadeIn(); 
        }); 
       }); 

       $('.home_button').click(function(){ 
        $('.panel:visible').fadeOut(); 
       }); 
     }); 
    </script> 

<div class="menu"> 
<ul class="menu"> 
<li class="home_button">home</li> 
<li class="work_button">work</li> 
<li class="cms_button">cms</a></li> 
<li class="contact_button">contact</a></li> 
</ul> 
</div> 

    <div class="panel" id="work"> 
     <p>...</p> 
    </div> 

    <div class="panel" id="cms"> 
     <p>...</p> 
    </div> 

    <div class="panel" id="contact"> 
     <p>...</p> 
    </div> 

Answer 1

$(function(){ 
     $('.panel').hide(); 

     $('.work_button,.cms_button,.home_button').click(function(){ 
      var thiss=$(this); 
      $('.panel').fadeOut(function(){ 
      thiss.fadeIn(); 
      }); 
     }); 
     $('.home_button').click(function(){ 
      $('.panel:visible').fadeOut(); 
     }); 

}); 

Answer 2

使用jQuery UI，也許會讓生活更輕鬆！

<script type="text/javascript"> 
    jQuery(document).ready(function($) { 
     $('#panels').accordion(); 
    }); 
</script> 

<div id="#panels"> 
    <h3><a href="#">Work</a></h3> 
    <div class="panel" id="work"> 
     <p>...</p> 
    </div> 

    <h3><a href="#">CMS</a></h3> 
    <div class="panel" id="cms"> 
     <p>...</p> 
    </div> 

    <h3><a href="#">Contact</a></h3> 
    <div class="panel" id="contact"> 
     <p>...</p> 
    </div> 
</div> 

Answer 3

<script type='text/javascript'> 
    $(function(){ 
     $('.panel').hide(); 
     $('.work_button').click(function(){ 
      FadeOutIn($('#cms,#contact'), $('#work')); 
     }); 
     $('.cms_button').click(function(){ 
      FadeOutIn($('#work,#contact'), $('#cms')); 
     }); 
     $('.contact_button').click(function(){ 
      FadeOutIn($('#cms,#work'), $('#contact')); 
     }); 
     $('.home_button').click(function(){ 
      FadeOutIn($('.panel:visible'), null)); 
     }); 
    }); 

    function FadeOutIn(fadeOutElements, fadeInElements) { 
     fadeOutElements.fadeOut(function(){ 
      fadeInElements.fadeIn(); 
     }); 
    } 
</script> 

Answer 4

我會說出相同類別的名稱作爲面板ID按鈕：

<button class="home">Home</button> 
<button class="work">Work</button> 
<button class="cms">CMS</button> 
<button class="contact">Contact</button> 

<div class="panel" id="home"> 
    <p>..Home..</p> 
</div> 

<div class="panel" id="work"> 
    <p>..work..</p> 
</div> 

<div class="panel" id="cms"> 
    <p>..cms..</p> 
</div> 

<div class="panel" id="contact"> 
    <p>..contact..</p> 
</div>​ 

然後你就可以簡化您的腳本（demo）：

$(function() { 
    $('.panel').hide(); 

    $('button').click(function(){ 
     var tar = $(this).attr('class'); // replace "_button" if there 
     $('.panel').fadeOut(function(){ 
      $('#' + tar).fadeIn(); 
     }); 

    }); 

});​ 

---

如果問我如何使菜單工作，我會做this：

$(function() { 
    $('.panel:not(#home)').hide(); 

    $('.menu li').click(function() { 
     var tar = '#' + $(this).attr('class').replace("_button",''); 
     $('.panel:not(' + tar + ')').fadeOut(); 
     $(tar).fadeIn(); 
    }); 

});​