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 のデバッグ方法はありますか?