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

jQuery选项卡功能无法在div之间成功切换

2 个答案: