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');