teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

説明文の変更

2017/01/22 14:56

投稿

cotton88
cotton88

スコア87

title CHANGED
File without changes
body CHANGED
@@ -1,13 +1,15 @@
1
1
  数日前にした別の質問からの続きです。
2
2
 
3
3
  【以前の質問】
4
- https://teratail.com/questions/62574
4
+ [https://teratail.com/questions/62574](https://teratail.com/questions/62574)
5
5
 
6
6
  少し言葉足らずで整理しきれなかったので、再質問です。
7
- メニューをクリックしたらURLとhrefが一緒のaタグにis_activeを付けたいと思っています。
7
+ 現在開いているページのパスが書かれたメニューaタグにis_activeを付けたいと思っています。
8
8
 
9
+ 全て静的(CMS等動的ではない)でアコーディオンのようなアクションも付ける予定はありません。
10
+ メニューをクリックしたら該当のページに遷移する予定です。
11
+
9
12
  ディレクトリの構成は下記のとおりです。
10
-
11
13
  /sample1/
12
14
  /sample1/example1.html(←ココを開くとうめく動作しない)
13
15
  /sample1/aaa/
@@ -18,6 +20,25 @@
18
20
 
19
21
  以前の質問で理想のHTML1~3は、開いているページのメニューにis_activeを付けることができましたが、上記の場所を開いた時にis_activeが付いてくれませんでした。
20
22
 
23
+
24
+ 下記は、前回のベストアンサーの回答者様が教えてくれたJSです。
25
+ ```javascript
26
+ var currentPath = location.pathname.split("/");
27
+ var targetHref = "/" + currentPath[currentPath.length - 3] + "/" + currentPath[currentPath.length - 2] + "/" + currentPath[currentPath.length - 1];
28
+ targetHref = targetHref.split("index.html")[0]; //一応
29
+ //↑ここは本番サイトに合わせてください。
30
+ // 想定する結果A: /sample/ccc/example1.html
31
+ // 想定する結果B: /sample/aaa/
32
+
33
+ navList = $(".side__navigation").find("a");
34
+ navList.each(function(){
35
+ var myhref = $(this).attr("href");
36
+ if( myhref === targetHref ) {
37
+ $(this).addClass("is_active");
38
+ }
39
+ } );
40
+ ```
41
+
21
42
  ```HTML
22
43
  <!-- 【理想のHTML1】 -->
23
44
  <!-- 現在URLが/sample/ccc/example1.htmlの時 -->