こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

投稿日時 - 2010-07-04 05:49:57

QNo.6013949

すぐに回答ほしいです

質問者が選んだベストアンサー

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

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

投稿日時 - 2010-07-05 11:17:39

このQ&Aは役に立ちましたか?

6人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問