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;
}
