jquery1.4で画像とリンクの切り替えを行おうとしています。

質問

jquery1.4で画像とリンクの切り替えを行おうとしています。
ひとまず動き的にはうまくは行っているのですが、切り替え対象の複数の画像をfloat:left;等で
横並びにすると、切り替えるたい画像をクリック後に規定の場所に画面が移動してしまいます。
対処法があれば教えていただけますでしょうか？

【javascript】
$(document).ready( function() {
$(".thumbnail p").click( function() {
var changeSrc = this.src;
var changeHref = this.href;
$("#target img").fadeOut("fast",
function() {
$(this).attr("src", changeSrc);
$(this).fadeIn();
}
);
$("#target a").attr("href", changeHref);
});
$(".thumbnail2 img").click( function() {
var changeSrc = this.src;
$("#target2").fadeOut(
"slow",
function() {
$(this).attr("src", changeSrc);
$(this).fadeIn();
}
);
});

$(".thumbnail3 img").click( function() {
var changeSrc = this.src;
$("#target3").slideUp(
"slow",
function() {
$(this).attr("src", changeSrc);
$(this).slideDown();
}
);
});
});
</script>

【HTML】
<div>
<p id="target"><a href="./main.cgi?mode=details2&sid=1&gid=1S000046"><img src="./g_images/IMG_1457.jpg" width="240" height="320" alt="ブランドカテゴリー" /></a></p>
</div>
<div class="thumbnail">
<p href="./main.cgi?mode=details2&sid=1&gid=1S000043" src="./g_images/IMG_1457.jpg" class="item">
<img src="./g_images/IMG_1457.jpg" width="90" height="150" alt="ブランドカテゴリー" />
<br /><a href="./main.cgi?mode=details2&sid=1&gid=1S000043">詳細</a></p>

<p href="./main.cgi?mode=details2&sid=1&gid=1S000047" src="./g_images/IMG_1469.jpg" class="item">
<img src="./g_images/IMG_1469.jpg" width="90" height="150" alt="ブランドカテゴリー" />
<br /><a href="./main.cgi?mode=details2&sid=1&gid=1S000047">詳細</a></p>
</div>

【css】
.thumbnail {
height:200px;
text-align:center;
}

.item {
float:left;
padding-left:10px;
margin-left:10px;
}

回答No.1

fujillin · ベストアンサー

thumbnail側のレイアウトが崩れるってことでしょうか？
ご提示のソースでは再現しません。もっとも、ご提示のスクリプトは、ご提示のソースだと2/3は関係ありませんけれど。

それよりも、そのままではsrc、hrefが取得できてないブラウザがあります。（ｆｘ3.5、opera10）
this値が示すものを再確認したほうがよろしいかと。
また、わざわざpの属性に、本来はないはずのsrcやhrefを設けなくとも、直接imageのsrcとaのhrefを参照するようにしたほうが良いのでは？