すみません、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ランキング
-
JavaScriptで変更した属性の元...
-
複数画像のランダム複数表示(...
-
MFCで画像を表示させているので...
-
error LNK2019 未解決のシンボ...
-
imgボタンにfocusの当て方
-
jQueryで、画像クリック→フェー...
-
OpenCV での画素値の比較について
-
jQuery 複数のfind()
-
セクトボックスの連携の仕方。
-
以下のタグはクリックすると画...
-
画像処理 C言語 元画像の幅...
-
Javaの正規表現でimgタグのalt...
-
画像が表示でnull; this.src
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
jqueryのsortableで一部ソート...
-
removeEventListenerについて
-
Slick.jsのオプションrtlについて
-
どの<li><a> が押されたか判別...
-
クリックで色変更後に既に変更...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScriptで変更した属性の元...
-
MFCで画像を表示させているので...
-
画像が表示でnull; this.src
-
error LNK2019 未解決のシンボ...
-
Vb.net2005での画像の合成方法
-
onclickで画面が固まる・・・ら...
-
リンク先を動的に変更する
-
(javascript)HTMLで指定した...
-
【OpenCV】二値画像後、白の部...
-
jQuery 複数のfind()
-
ラズパイでno module named zbar
-
外部javascriptの重複を防ぐには
-
条件分岐でキーが入力されてい...
-
かぶらないランダム画像
-
HTMLからimgのsrcのみを正規表...
-
pythonで、tkinterとpillowの組...
-
OpenCV での画素値の比較について
-
imgボタンにfocusの当て方
-
指定したフォルダの画像を一括...
-
OpenCVでサンプルコードを使う...
おすすめ情報