Переключить ДИВ вопрос

Question

Im пытается переключить некоторые дивы и ее не работает, вот это ЯШ:

<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

Ваши идентификаторы не совпадают.

В вашем HTML-коде есть toggle_thumbs, но у вас есть код toggle_thumb.

---

Если все, что вы делаете, это скрывается и показ, вы можете значительно упростить код, как это:

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

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

EDIT: Сделано это даже немного более эффективным ,

Answer 2

Добавьте return false; в свой делегат .click(), чтобы браузер не переходил на «#» (переход к началу страницы).

Вы также можете упростить свой 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>