すみません、jquery初心者です。
下記の様にサムネイルをクリックすると、mainの画像が切り替わる画像ギャラリーを作成しておりまして、
サムネイルをクリックして class="current" を切り替えたいのですが、うまく動きません。
別のサムネイルをクリックすると、最初のclassはremoveされるのですが、
クリックしたサムネイルにclassを付けたいのですが効きません。。
$(document).ready(function() {
$(function(){
$('#sum li a').click(function(){
var h = $(this).eq(0).attr('rel');
$('#main img').fadeOut(function(){
($('#main img').attr("src",h)).fadeIn();
$('#sum li a').removeClass('current');
$(this).addClass('current');
});
return false;
})
});
});
<div class="main_area">
<p id="main"><img src="images/img01.jpg" /></p>
</div>
<ul id="sum" class="clearfix">
<li><a href="#" rel="img01.jpg" class="current"><img src="images/sum01.jpg" /></a></li>
<li><a href="#" rel="img02.jpg"><img src="images/sum02.jpg" /></a></li>
<li><a href="#" rel="img03.jpg"><img src="images/sum03.jpg" /></a></li>
</ul>
ご教授頂けると非常に助かります。
よろしくお願いします。
No.1ベストアンサー
- 回答日時:
以下のような感じでどうでしょう。
$('#main img').fadeOut(); の処理の中で $(this) とした場合、$('#main img')を指しているのでaタグのクラス名ではなく<p id="main">の中のimgタグのクラス名を書き換えていました。
$(document).ready(function() {
$(function(){
$('#sum li a').click(function(){
var h = $(this).eq(0).attr('rel');
$('#sum li a').removeClass('current');
$(this).addClass('current');
$('#main img').fadeOut(function(){
($('#main img').attr("src",h)).fadeIn();
});
return false;
});
});
});
t_ohtaさん
ご回答ありがとうございます!
頂いた回答で無事動きました。
何とも初歩的なミスだったんですね。。
大変助かりました。有難う御座いました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS htmlについて質問です! 写真のように写真の部分が?になってしまいます。 ファイルもしっかり選べて 1 2023/07/09 21:17
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- PHP 共通の処理をまとめる方法がわからないのでアドバイスお願いします。 1 2022/12/19 20:20
- Perl RSSにdiv,ul classを付けたいのですがどのようにつけるのかわからないです 2 2022/03/28 01:53
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
onclickで画面が固まる・・・ら...
-
画像が表示でnull; this.src
-
jqueryスライドショーをストッ...
-
画像ファイルをアップロードす...
-
JavaScriptで変更した属性の元...
-
ダイアログから画像ファイルは...
-
MAX関数を使ってからLEFT JOIN...
-
seleniumbasic chrome操作について
-
iframe内のリンク文字のマウス...
-
createElementで作成した要素を...
-
jQueryでn秒後に要素を最後に移動
-
読み込んだQRコードをフォーム...
-
HTML id名とjavascript変数名
-
htmlの記述で link rel=styles...
-
オンマウスで、画像切り替え+...
-
php select SQL文
-
this.src等のthisについて
-
jQueryでシンプルドラッグドロ...
-
複数のリンク画像を一定時間で...
-
console.log結果をhtmlで表示し...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScriptで変更した属性の元...
-
MFCで画像を表示させているので...
-
画像が表示でnull; this.src
-
error LNK2019 未解決のシンボ...
-
Vb.net2005での画像の合成方法
-
onclickで画面が固まる・・・ら...
-
リンク先を動的に変更する
-
【OpenCV】二値画像後、白の部...
-
(javascript)HTMLで指定した...
-
jQuery 複数のfind()
-
外部javascriptの重複を防ぐには
-
ラズパイでno module named zbar
-
条件分岐でキーが入力されてい...
-
OpenCV での画素値の比較について
-
HTMLからimgのsrcのみを正規表...
-
pythonで、tkinterとpillowの組...
-
かぶらないランダム画像
-
imgボタンにfocusの当て方
-
指定したフォルダの画像を一括...
-
OpenCVでサンプルコードを使う...
おすすめ情報