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

回答編集履歴

3

chousei

2019/11/28 01:17

投稿

yambejp
yambejp

スコア117885

answer CHANGED
@@ -6,9 +6,10 @@
6
6
  });
7
7
  ```
8
8
  # 調整版
9
+ content→item
9
10
  ```javascript
10
11
  <style>
11
- .contents.current{
12
+ .item.current{
12
13
  color:aqua;
13
14
  }
14
15
  .subNav.current{
@@ -23,7 +24,7 @@
23
24
  var href = location.href.match(/.+?(?=[?#]|$)/)[0];
24
25
  $('a').filter(function(){
25
26
  return $(this).prop('href').match(href);
26
- }).closest('.subNav').addClass('current').closest('.contents').addClass('current');
27
+ }).closest('.subNav').addClass('current').closest('.item').addClass('current');
27
28
  $('a').filter(function(){
28
29
  return $(this).prop('href').match(href);
29
30
  }).closest('.subNav').prevAll('.acc-subOpen').prop('checked',true);

2

chousei

2019/11/28 01:17

投稿

yambejp
yambejp

スコア117885

answer CHANGED
@@ -4,4 +4,52 @@
4
4
  $('.contents:has(a[href="'+href+'"]),.subNav:has(a[href="'+href+'"])').addClass('current');
5
5
  $('.subNav:has(a[href="'+href+'"])').prevAll('.acc-subOpen').prop('checked',true);
6
6
  });
7
+ ```
8
+ # 調整版
9
+ ```javascript
10
+ <style>
11
+ .contents.current{
12
+ color:aqua;
13
+ }
14
+ .subNav.current{
15
+ color:lime;
16
+ }
17
+ </style>
18
+
19
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
20
+ <script>
21
+ $(function(){
22
+ $('.current').removeClass('current');
23
+ var href = location.href.match(/.+?(?=[?#]|$)/)[0];
24
+ $('a').filter(function(){
25
+ return $(this).prop('href').match(href);
26
+ }).closest('.subNav').addClass('current').closest('.contents').addClass('current');
27
+ $('a').filter(function(){
28
+ return $(this).prop('href').match(href);
29
+ }).closest('.subNav').prevAll('.acc-subOpen').prop('checked',true);
30
+ });
31
+ </script>
32
+
33
+
34
+ <div id="mainNavBox">
35
+ <ul class="contents">
36
+ <li class="item">
37
+ <input id="acc-subOpen-home" class="acc-subOpen" type="checkbox">
38
+ <label class="acc-unshown" for="acc-subOpen-home">Home</label>
39
+ <ul class="subNav">
40
+ <li class="current"><a href="./top.html">トップページ</a></li>
41
+ <li><a href="#">お知らせ一覧</a></li>
42
+ <li><a href="#">リリースノート一覧</a></li>
43
+ </ul>
44
+ </li>
45
+ <li class="item">
46
+ <input id="accSP-subOpen-home" class="acc-subOpen" type="checkbox">
47
+ <label class="acc-unshown" for="accSP-subOpen-home">マイページ</label>
48
+ <ul class="subNav">
49
+ <li><a href="profile.html">プロフィール</a></li>
50
+ <li><a href="keiyaku.html">契約状況</a></li>
51
+ </ul>
52
+ </li>
53
+ </ul>
54
+ </div>
7
55
  ```

1

chousei

2019/11/27 10:39

投稿

yambejp
yambejp

スコア117885

answer CHANGED
@@ -2,5 +2,6 @@
2
2
  $(function(){
3
3
  var href = location.href.match(".+/(.+?)([?#;].*)?$")[1];
4
4
  $('.contents:has(a[href="'+href+'"]),.subNav:has(a[href="'+href+'"])').addClass('current');
5
+ $('.subNav:has(a[href="'+href+'"])').prevAll('.acc-subOpen').prop('checked',true);
5
6
  });
6
7
  ```