質問編集履歴

3

htmlを修正しました。

2019/10/09 02:59

投稿

vankick
vankick

スコア22

test CHANGED
File without changes
test CHANGED
@@ -176,6 +176,100 @@
176
176
 
177
177
  </div>
178
178
 
179
+
180
+
181
+ <div class="articleComponent">
182
+
183
+ <h2>H2の内容</h2>
184
+
185
+ </div>
186
+
187
+ <div class="articleComponent">
188
+
189
+ <p class="articleText">テキスト</p>
190
+
191
+ </div>
192
+
193
+
194
+
195
+ <div class="articleComponent">
196
+
197
+ <h2>H2の内容</h2>
198
+
199
+ </div>
200
+
201
+ <div class="articleComponent">
202
+
203
+ <p class="articleText">テキスト</p>
204
+
205
+ </div>
206
+
207
+
208
+
209
+ <div class="articleComponent">
210
+
211
+ <h2>H2の内容</h2>
212
+
213
+ </div>
214
+
215
+ <div class="articleComponent">
216
+
217
+ <p class="articleText">テキスト</p>
218
+
219
+ </div>
220
+
221
+ <div class="articleComponent">
222
+
223
+ <h3>H3の内容</h3>
224
+
225
+ </div>
226
+
227
+ <div class="articleComponent">
228
+
229
+ <p class="articleText">テキスト</p>
230
+
231
+ </div>
232
+
233
+ <div class="articleComponent">
234
+
235
+ <h3>H3の内容</h3>
236
+
237
+ </div>
238
+
239
+ <div class="articleComponent">
240
+
241
+ <p class="articleText">テキスト</p>
242
+
243
+ </div>
244
+
245
+
246
+
247
+ <div class="articleComponent">
248
+
249
+ <h2>H2の内容</h2>
250
+
251
+ </div>
252
+
253
+ <div class="articleComponent">
254
+
255
+ <p class="articleText">テキスト</p>
256
+
257
+ </div>
258
+
259
+
260
+
261
+ <div class="articleComponent">
262
+
263
+ <h2>H2の内容</h2>
264
+
265
+ </div>
266
+
267
+ <div class="articleComponent">
268
+
269
+ <p class="articleText">テキスト</p>
270
+
271
+ </div>
272
+
179
273
  ```
180
274
 
181
275
 

2

htmlを修正しました。

2019/10/09 02:59

投稿

vankick
vankick

スコア22

test CHANGED
File without changes
test CHANGED
@@ -16,17 +16,33 @@
16
16
 
17
17
 
18
18
 
19
- <li><a href="#">h2の見出し</a></li>
19
+ <div id="index">
20
20
 
21
- <li class="toc-h3"><a href="#">h3の見出し</a></li>
21
+ <p class="toc-title">目次</p>
22
22
 
23
- <li class="toc-h3"><a href="#">h3の見出し</a></li>
23
+
24
24
 
25
- <li><a href="#">h2の見出し</a></li>
25
+ <ul>
26
26
 
27
- <li class="toc-h3"><a href="#">h3見出し</a></li>
27
+ <li><a href="#target-1">H2内容</a></li>
28
28
 
29
+ <li><a href="#target-2">H2の内容</a></li>
30
+
31
+ <li><a href="#target-3">H2の内容</a></li>
32
+
29
- <li class="toc-h3"><a href="#">h3の見出し</a></li>
33
+ <li><a href="#target-4">H3の内容</a></li>
34
+
35
+ <li><a href="#target-5">H3の内容</a></li>
36
+
37
+ </li>
38
+
39
+ <li><a href="#target-6">H2の内容</a></li>
40
+
41
+ <li><a href="#target-7">H2の内容</a></li>
42
+
43
+ </ul>
44
+
45
+ </div>
30
46
 
31
47
  ```
32
48
 
@@ -36,17 +52,33 @@
36
52
 
37
53
  ```
38
54
 
39
- <li>
55
+ <div id="index">
40
56
 
41
- <a href="#">h2の見出し
57
+ <p class="toc-title">目次</p>
42
58
 
43
- <li><a href="#">h3の見出し</a></li>
59
+
44
60
 
45
- <li><a href="#">h3の見出し</a></li>
61
+ <ul>
46
62
 
47
- </a>
63
+ <li><a href="#target-1">H2の内容</a></li>
48
64
 
65
+ <li><a href="#target-2">H2の内容</a></li>
66
+
67
+ <li><a href="#target-3">H2の内容
68
+
69
+ <li><a href="#target-4">H3の内容</a></li>
70
+
71
+ <li><a href="#target-5">H3の内容</a></li>
72
+
73
+ </a></li>
74
+
75
+ <li><a href="#target-6">H2の内容</a></li>
76
+
77
+ <li><a href="#target-7">H2の内容</a></li>
78
+
79
+ </ul>
80
+
49
- </li>
81
+ </div>
50
82
 
51
83
  ```
52
84
 

1

htmlを記載しました。

2019/10/09 02:50

投稿

vankick
vankick

スコア22

test CHANGED
File without changes
test CHANGED
@@ -18,15 +18,15 @@
18
18
 
19
19
  <li><a href="#">h2の見出し</a></li>
20
20
 
21
- <li class="h3"><a href="#">h3の見出し</a></li>
21
+ <li class="toc-h3"><a href="#">h3の見出し</a></li>
22
22
 
23
- <li class="h3"><a href="#">h3の見出し</a></li>
23
+ <li class="toc-h3"><a href="#">h3の見出し</a></li>
24
24
 
25
25
  <li><a href="#">h2の見出し</a></li>
26
26
 
27
- <li class="h3"><a href="#">h3の見出し</a></li>
27
+ <li class="toc-h3"><a href="#">h3の見出し</a></li>
28
28
 
29
- <li class="h3"><a href="#">h3の見出し</a></li>
29
+ <li class="toc-h3"><a href="#">h3の見出し</a></li>
30
30
 
31
31
  ```
32
32
 
@@ -58,7 +58,7 @@
58
58
 
59
59
  document.addEventListener('DOMContentLoaded', function () {
60
60
 
61
- var contentsList = document.getElementById('toc');
61
+ var contentsList = document.getElementById('index');
62
62
 
63
63
  var ulWrapper = document.createElement('ul');
64
64
 
@@ -134,6 +134,18 @@
134
134
 
135
135
  ```
136
136
 
137
+ ```
138
+
139
+ <div id="index">
140
+
141
+ <p class="toc-title">目次</p>
142
+
143
+ <!-- ここに目次が<ul><li></li></ul>の形で表示される -->
144
+
145
+ </div>
146
+
147
+ ```
148
+
137
149
 
138
150
 
139
151
  どうしたら、入れ子にならず、ただh3の<li>を、h2の<li>の後に追加することができるでしょうか。どなたかお力をお貸しいただきたいです。