質問編集履歴
1
HTMLコードを追記しました
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -3,6 +3,36 @@
|
|
|
3
3
|
カスタム投稿で実績のページを作成し、カスタム分類も利用しています。
|
|
4
4
|
|
|
5
5
|
実績のカスタム投稿アーカイブページと各分類アーカイブページに横スクロール可能なタブナビゲーションを設置しています。
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
```HTML
|
|
10
|
+
|
|
11
|
+
<nav id="tab-nav" class="my-nav">
|
|
12
|
+
|
|
13
|
+
<div class="my-nav__mask">
|
|
14
|
+
|
|
15
|
+
<ul class="my-nav__list">
|
|
16
|
+
|
|
17
|
+
<li class="current"><a href="http://xxxx.jp/xxxx/">ALL</a></li>
|
|
18
|
+
|
|
19
|
+
<li><a href="http://xxxx.jp/xxxx/xxxx/">たぶ1</a></li>
|
|
20
|
+
|
|
21
|
+
<li><a href="http://xxxx.jp/xxxx/xxxx/">たぶ2</a></li>
|
|
22
|
+
|
|
23
|
+
<li><a href="http://xxxx.jp/xxxx/xxxx/">たぶ3</a></li>
|
|
24
|
+
|
|
25
|
+
</ul>
|
|
26
|
+
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
</nav>
|
|
30
|
+
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
6
36
|
|
|
7
37
|
ページ遷移した時に、現在のページのタブを表示させる為、scrollIntoView で以下のように記述しました。
|
|
8
38
|
|
|
@@ -14,7 +44,9 @@
|
|
|
14
44
|
|
|
15
45
|
$(window).load(function() {
|
|
16
46
|
|
|
47
|
+
var parentDOM = document.getElementById('tab-nav');
|
|
48
|
+
|
|
17
|
-
var element =
|
|
49
|
+
var element = parentDOM.getElementsByClassName('current')[0];
|
|
18
50
|
|
|
19
51
|
element.scrollIntoView(true);
|
|
20
52
|
|
|
@@ -38,7 +70,9 @@
|
|
|
38
70
|
|
|
39
71
|
jQuery(function($){
|
|
40
72
|
|
|
73
|
+
var parentDOM = document.getElementById('tab-nav');
|
|
74
|
+
|
|
41
|
-
var element =
|
|
75
|
+
var element = parentDOM.getElementsByClassName('current')[0];
|
|
42
76
|
|
|
43
77
|
|
|
44
78
|
|