jQuery選項卡功能不能在div之間切換

Question

jQuery討厭我......我有一組圖像設置在一個表格中，每個圖像都有一個div下的相關表單...我希望能夠在這些表單/ div通過將圖像用作「選項卡」，但它似乎不起作用。我設法做的就是讓它隱藏不是第一個的div。這是有史以來最基本的事情。

這裏是我正努力使用jQuery修改我的HTML的例子：

<table id="publishimages"> 
    <tr> 
    <td href="#tab-1"> 
     <img class="image1" src="randomsource1"> 
    </td> 
    <td href="#tab-2"> 
     <img class="image2" src="randomsource2"> 
    </td> 
</tr> 
</table> 

<div id="desc"> 
    <div id="tab-1"> 
    Random description1 
    </div> 
    <div id="tab-2"> 
    Random description2 
    </div> 
</div> 

，這裏是我的jQuery腳本...

$(document).ready(function() { 
     $('#desc div').hide(); 
     $('#desc div:first').show(); 
     $('#desc td:first').addClass('active'); 

     $('#desc td img').click(function() { 
      $('#desc td').removeClass('active'); 
      $(this).parent().addClass('active'); 
      var currentTab = $(this).parent().attr('href'); 
      $('#desc div').hide(); 
      $(currentTab).show(); 
      return false; 

     }); 
    }); 

什麼是這麼可怕的錯呢？是否有更有效的方法來調試JavaScript，而不是試驗和錯誤？

Answer 1

喜糾正代碼：

$(document).ready(function() { 
      $('#desc div').hide();    
      $('#desc div:first').show();     
      $('#publishimages td:first').addClass('active');   
      $('#publishimages td').click(function(){      
       $('#publishimages td').removeClass('active');     
       $(this).addClass('active');     
       var currentTab = $(this).attr('href');     
       $('#desc div').hide();     
       $(currentTab).show();     
       return false; 
       }); 
    }); 

這將做要緊。

Answer 2

我覺得你的代碼缺少這裏：

$('#desc td:first').addClass('active'); 

這應該是：

$('#publishimages td:first').addClass('active'); 

這些：

$('#desc td img').click(function() { 
     $('#desc td').removeClass('active'); 

應該是：

$('#publishimages td img').click(function() { 
     $('#publishimages td').removeClass('active');