質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

776閲覧

クリック時にタグの切り替え・画像のON、OFF

sksk0611

総合スコア9

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/10/12 10:08

###前提・実現したいこと
クリック時にタグの切り替え・画像のON、OFFがしたいです。
現在タグの切り替えはできているのですが、画像のON、OFFがうまくいきません。
html、jsの事をお助け頂けると幸いです。

###発生している問題・エラーメッセージ

タグは実装できたのですが、 そのあとの選択されている時だけ画像をon、 他の画像を選択したときはoffにすることができません。 色々と試したのですが画像がonの状態から戻らなくなりました。
html <div class="js-tab"> <div class="jewelry active"><img src="jewelry_category_off.png" width="" height="" alt=""/></div> <div class="propose"><img src="propose_category_off.png" width="" height="" alt=""/></div> <div class="memorial"><img src="memorial_category_off.png" width="" height="" alt=""/></div> <div class="others"><img src="others_category_off.png" width="" height="" alt=""/></div> </div><!-- /.js-tab -->
$(function(){ /*======================================= タブ切り替え =========================================*/ $('.js-tab > div').click(function(){ $('.js-tab > div,.js-tab_content').removeClass('active'); var tabClass = $(this).attr('class'); $(this).addClass('active'); $('.js-tab_content').each(function(){ if($(this).attr('class').indexOf(tabClass) != -1){ $(this).addClass('active').fadeIn(); }else{ $(this).hide(); } }); }); });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yutaIMD

2017/10/12 10:21

タブの選択部分(htmlにある部分)の切り替え方法がわからないということですか?
sksk0611

2017/10/12 10:23

ありがとうございます。タブの選択を画像で行っていて選択時と選択されていないときの切り替えが分からないということです。分かりにくくてすみません。
guest

回答2

0

ベストアンサー

画像の切り替え、間違えてましたね……
これでどうでしょう

$(function(){ $('.js-tab div').click(function(){ $('.js-tab div').removeClass('active'); //一旦全ての.activeを削除 $(this).addClass('active'); //クリックしたものに.activeを追加 for(var i = 0; i < $('.js-tab div').length; i++) { $('.js-tab div').eq(i).find('img').attr('src', $('.js-tab div').eq(i).find('img').attr('src').replace('_on', '_off')); } $(this).find('img').attr('src', $(this).find('img').attr('src').replace('_off', '_on')); }); });

投稿2017/10/13 05:29

yutaIMD

総合スコア60

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sksk0611

2017/10/15 02:58

ありがとうございます。 解決いたしました。 今後ともよろしくお願いしますm(__)m
guest

0

以下でいかがでしょうか

$(function(){ $('.js-tab div').click(function(){ $('.js-tab div').removeClass('active'); //一旦全ての.activeを削除 $(this).addClass('active'); //クリックしたものに.activeを追加 $('.js-tab div').find('img').attr('src'). replace('_on', '_off'); //一旦全てのsrcの_onを_offに置換 $(this).find('img').attr('src'). replace('_off', '_on'); //クリックしたもののsrcの_offを_onに置換 }); });

投稿2017/10/12 10:30

yutaIMD

総合スコア60

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sksk0611

2017/10/12 11:12

迅速なご対応ありがとうございます。 上記の記述で試してみたのですが、 タグの切り替えは正常なのですが、画像の置き換えが行われないです。 htmlの記述に問題があるのでしょうか? どうぞよろしくお願いします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問