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

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

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

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

jQuery

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

Q&A

解決済

3回答

2595閲覧

URLとhrefが一緒のナビゲーションのaタグにis_activeを付けたい

cotton88

総合スコア87

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2017/01/19 04:30

いつもお世話になっています。

小メニューのあるメニューをクリックしたらURLとhrefが一緒のaタグにis_activeを付けたいのですが、下記に書いたJSだと、小メニューに全てis_activeが付いてしまってます。

書いたJSは1階層目はいいんですが、小メニューになるとうまくできません。
JSコードの下記に理想のHTMLを用意いたしました。

ちゃんと今開いているページのみis_activeが付くようにできないでしょうか。。
よろしくお願いします!

html

1<!-- 【こうなっちゃうHTML】 --> 2<!-- /sample/ccc/example1.htmlを開いている時 --> 3<dl class="side__navigation"> 4 <dt>サンプル情報</dt> 5 <dd> 6 <nav role="navigation"> 7 <ul> 8 <li><a href="/sample/aaa/">サンプル</a></li> 9 <li><a href="/sample/bbb/">サンプル</a></li> 10 <li><a href="/sample/ccc/" class="is_active">サンプル</a> 11 <ul> 12 <li><a href="/sample/ccc/example1.html" class="is_active">開いているページ</a></li> 13 <li><a href="/sample/ccc/example2.html" class="is_active">サンプル</a></li> 14 <li><a href="/sample/ccc/example3.html" class="is_active">サンプル</a></li> 15 </ul> 16 </li> 17 <li><a href="/sample/ddd/">サンプル</a></li> 18 </ul> 19 </nav> 20 </dd> 21</dl>

javascript

1var activeUrl = location.pathname.split("/")[2]; 2 navList = $(".side__navigation ").find("a"); 3navList.each(function(){ 4 if( $(this).attr("href").split("/")[2] == activeUrl ) { 5 $(this).addClass("is_active"); 6 } 7});

ここからこうなってほしいというHTMLを記載させていただきます。

html

1<!-- 【理想のHTML1】 --> 2<!-- 現在URLが/sample/ccc/example1.htmlの時 --> 3<dl class="side__navigation"> 4 <dt>サンプル情報</dt> 5 <dd> 6 <nav role="navigation"> 7 <ul> 8 <li><a href="/sample/aaa/">サンプル</a></li> 9 <li><a href="/sample/bbb/">サンプル</a></li> 10 <li><a href="/sample/ccc/">サンプル</a> 11 <ul> 12 <li><a href="/sample/ccc/example1.html" class="is_active">開いているページ</a></li> 13 <li><a href="/sample/ccc/example2.html">サンプル</a></li> 14 <li><a href="/sample/ccc/example3.html">サンプル</a></li> 15 </ul> 16 </li> 17 <li><a href="/sample/ddd/">サンプル</a></li> 18 </ul> 19 </nav> 20 </dd> 21</dl>

html

1<!-- 【理想のHTML2】 --> 2<!-- 現在URLが/sample/ccc/の時 --> 3<dl class="side__navigation"> 4 <dt>サンプル情報</dt> 5 <dd> 6 <nav role="navigation"> 7 <ul> 8 <li><a href="/sample/aaa/">サンプル</a></li> 9 <li><a href="/sample/bbb/">サンプル</a></li> 10 <li><a href="/sample/ccc/" class="is_active">開いているページ</a> 11 <ul> 12 <li><a href="/sample/ccc/example1.html">サンプル</a></li> 13 <li><a href="/sample/ccc/example2.html">サンプル</a></li> 14 <li><a href="/sample/ccc/example3.html">サンプル</a></li> 15 </ul> 16 </li> 17 <li><a href="/sample/ddd/">サンプル</a></li> 18 </ul> 19 </nav> 20 </dd> 21</dl>

html

1<!-- 【理想のHTML3】 --> 2<!-- 現在URLが/sample/bbb/の時 --> 3<dl class="side__navigation"> 4 <dt>サンプル情報</dt> 5 <dd> 6 <nav role="navigation"> 7 <ul> 8 <li><a href="/sample/aaa/">サンプル</a></li> 9 <li><a href="/sample/bbb/" class="is_active">開いているページ</a></li> 10 <li><a href="/sample/ccc/">サンプル</a>li> 11 <li><a href="/sample/ddd/">サンプル</a></li> 12 </ul> 13 </nav> 14 </dd> 15</dl>

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

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

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

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

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

namimon

2017/01/19 04:45

example1.htmlなどは、ユニークでしょうか? aaa/example1.htmlや、bbb/example1.htmlなどがありますか?また、各フォルダのインデックスページはindex.htmlでしょうか?
cotton88

2017/01/19 04:51

ユニークではありません。 aaa/example1.htmlや、bbb/example1.htmlというケースはあります。ですが、aaa/とbbb/の小メニューが同時に展開する事はありません。アコーディオンでは開きませんし、CMSを利用する事もありません。そういった意味で同一ページに同じaaa/example1.htmlや、bbb/example1.htmlが出ることは無いのでユニークといって良いかもしれませんね。
cotton88

2017/01/19 04:52

あと、インデックスページはindex.htmlです!
guest

回答3

0

ベストアンサー

いかがでしょうか

var currentPath = location.pathname.split("/"); var targetHref = "/" + currentPath[currentPath.length - 3] + "/" + currentPath[currentPath.length - 2] + "/" + currentPath[currentPath.length - 1]; targetHref = targetHref.split("index.html")[0]; //一応 //↑ここは本番サイトに合わせてください。 // 想定する結果A: /sample/ccc/example1.html // 想定する結果B: /sample/aaa/ navList = $(".side__navigation").find("a"); navList.each(function(){ var myhref = $(this).attr("href"); if( myhref === targetHref ) { $(this).addClass("is_active"); } } );

投稿2017/01/19 06:48

namimon

総合スコア726

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

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

cotton88

2017/01/19 07:02

動きました!すごいです。 ちなみに<!-- 【理想のHTML3】 -->のHTML構成で、 <nav role="navigation"> <ul> <li><a href="/sample/aaa/">サンプル</a></li> <li><a href="/sample/bbb/example001.html" class="is_active">開いているページ</a></li> <li><a href="/sample/ccc/example002.html">サンプル</a>li> <li><a href="/sample/ddd/example003.html">サンプル</a></li> </ul> </nav> (index.html同じディレクトリに別名前のhtmlがある状態) というのは可能でしょうか。。。別質問で立ててもnamimon様指定にしても構いません!
namimon

2017/01/19 07:28

(index.html同じディレクトリに別名前のhtmlがある状態) というのは、index.htmlが指定されたらbbbのexample001.htmlをis_activeにするということですか?
cotton88

2017/01/19 07:51

言葉足らずで申し訳ないです。 言葉を整理して再質問します。。 その際、namimon様にも通知が行くようにするのでよろしくお願いします! 今回は文句なくベストアンサーにさせていただきます!
guest

0

こんな感じなのかなぁー

数値は微調整してください
検証url
http://localhost/test/is_active/ccc/example3.html

JavaScript

1var activeUrls = location.pathname.split("/"); 2 navList = $(".side__navigation").find("a"); 3 navList.each(parse); 4 5function parse(){ 6 var hrefs = $(this).attr("href").split("/") 7 if( hrefs[1] == activeUrls[3] ) { 8 if(hrefs.length > 2 && activeUrls[4] != hrefs[2]) return; 9 $(this).addClass("is_active"); 10 } 11}

投稿2017/01/19 05:12

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

split('/')[2]としてますが、
例えば、

js

1var url = "/sample/ccc/example1.html".split('/')[2]

とすると、urlには、"ccc"が入ります。
意図する動作をさせたい場合は.split('/')[3]だと思いますが。

投稿2017/01/19 04:45

turbgraphics200

総合スコア4267

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問