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

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

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

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

Q&A

解決済

1回答

622閲覧

スクロール位置に応じてナビゲーション内の画像を切り替える方法について

tetutetutetu

総合スコア46

JavaScript

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

0グッド

0クリップ

投稿2017/12/20 15:18

「ステップ1○○」「ステップ2○○」というように
作業の流れを説明するページを作っています。

そこに設置しているページ内リンクのナビゲーションで
現在位置をハイライトしたいと思っています。

http://begoingto.jp/demo/scroll_menu/

こちらの記事を参考にスクリプトを追加したところ、
動き自体は希望通りになりました。

参考サイトと違う点としては、
ナビゲーションのリンクを画像にしているため、
通常時は「step1_off.gif」を表示していて、
ステップ1の位置を超えると「step1_on.gif」を表示する、
といった動きにしています。

この画像切り替えの処理をステップ毎に記述しているのですが、
もっとスマートにやる方法があると思います。
ですが、如何せん素人なもので、どのようにすれば良いかわかりません。
※コードは一番下に記述しています。

画像を差し替える部分について、
正規表現を使って処理するような
やり方をご教示いただけるとありがたいです。

よろしくお願いいたします。

Javascript

1<script> 2$(function() { 3 4 var stepMenu = function() { 5 var array = { 6 '#step1': 0, 7 '#step2': 0, 8 '#step3': 0 9 }; 10 11 var $globalNavi = new Array(); 12 13 // 各要素のスクロール値を保存 14 for (var key in array) { 15 if ($(key).offset()) { 16 array[key] = $(key).offset().top - 10; 17 $globalNavi[key] = $('.step li a[href="' +key+ '"]'); 18 } 19 } 20 21 // スクロールイベントで判定 22 $(window).scroll(function () { 23 for (var key in array) { 24 if ($(window).scrollTop() > array[key] - 100) { 25 26 $('.step li a').each(function() { 27 $(this).removeClass('current'); 28 $('.step li img[src="img/step1_on.gif"]').attr('src','img/step1_off.gif'); 29 $('.step li img[src="img/step2_on.gif"]').attr('src','img/step2_off.gif'); 30 $('.step li img[src="img/step3_on.gif"]').attr('src','img/step3_off.gif'); 31 }); 32 $globalNavi[key].addClass('current'); 33 $('.step .current img[src="img/step1_off.gif"]').attr('src','img/step1_on.gif'); 34 $('.step .current img[src="img/step2_off.gif"]').attr('src','img/step2_on.gif'); 35 $('.step .current img[src="img/step3_off.gif"]').attr('src','img/step3_on.gif'); 36 } 37 } 38 }); 39 } 40 41 // 実行 42 stepMenu(); 43}); 44</script>

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

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

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

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

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

guest

回答1

0

ベストアンサー

画像切り替えの部分は、こんな感じでいけませんか?

$(".step .current img").attr('src', $(".step .current img").attr("src").replace(/^(.+)_off(.[a-z]+)$/, '$1_on$2'));

step○_off.gif→step○_on.gifに差し替えられると思います。
逆の処理は、_offと_onを入れ替えてください。

投稿2017/12/23 16:19

himecas

総合スコア41

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

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

tetutetutetu

2017/12/24 08:48

ありがとうございました!そのままの内容でうまくいきました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問