切換DIV問題

Question

我試着切換一些div和它不工作，這裏是JS：

<script type="text/javascript"> 
     $(function(){ 

      $('#toggle_full').click(function(){   
       $('#full_size').removeClass('toggle'); 
       $('#thumb_list').addClass('toggle'); 
      }); 
     }); 

     $(function(){ 

      $('#toggle_thumb').click(function(){    
       $('#thumb_list').removeClass('toggle'); 
       $('#full_size').addClass('toggle'); 
      }); 
     }); 
    </script> 

這裏是錨：

<div class="toggle_block"> 
     <a href="#" id="toggle_full"><img src="img/full_icon.jpg" alt="#"/></a> 
     <a href="#" id="toggle_thumbs"><img src="img/thumbs_icon.jpg" alt="#"/></a> 
    </div> 

這裏是類：

.toggle { 
display: none; 
} 

現在問題在哪裏？

Answer 1

您的ID不符。

在您的HTML中有toggle_thumbs，但在您的代碼中有​​。

---

如果你正在做的是隱藏和顯示，可以大大簡化你這樣的代碼：

http://jsfiddle.net/xTPU8/2/

$(function() { 
    var $elems = $('#toggle_full').hide() 
     .add('#toggle_thumb').click(function() { 
      $elems.toggle(); 
    }); 
});​ 

編輯：使其更甚至有點高效。

Answer 2

在您的.click()委託中添加return false;以防止瀏覽器導航到'＃'（跳轉到頁面頂部）。

您還可以簡化您的JS，但將您的兩個鏈接綁定放在相同位置，並使用hide()和show()。最終結果如下：

<script type="text/javascript"> 

    $(function() { 

     $('#toggle_full').click(function() {   
      $('#full_size').show(); 
      $('#thumb_list').hide(); 
      return false; 
     }); 


     $('#toggle_thumb').click(function() {    
      $('#thumb_list').show(); 
      $('#full_size').hide(); 
      return false; 
     }); 

    }); 

</script>