回答編集履歴
3
再調整
answer
CHANGED
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
<h2>h-3</h2>
|
|
40
40
|
```
|
|
41
41
|
|
|
42
|
-
# 調整版
|
|
42
|
+
# 再調整版
|
|
43
43
|
```javascript
|
|
44
44
|
<style>
|
|
45
45
|
.h3{background-Color:yellow}
|
|
@@ -49,11 +49,13 @@
|
|
|
49
49
|
var menu=document.querySelector('#index');
|
|
50
50
|
var ul=document.createElement('ul');
|
|
51
51
|
menu.appendChild(ul);
|
|
52
|
-
[].forEach.call(document.querySelectorAll('h2,h3'),x=>{
|
|
52
|
+
[].forEach.call(document.querySelectorAll('h2,h3'),(x,y)=>{
|
|
53
|
+
var id='target-'+(y+1).toString();
|
|
54
|
+
x.setAttribute('id',id);
|
|
53
55
|
var li=document.createElement('li');
|
|
54
56
|
ul.appendChild(li);
|
|
55
57
|
var a=document.createElement('a');
|
|
56
|
-
a.setAttribute('href','#');
|
|
58
|
+
a.setAttribute('href','#'+id);
|
|
57
59
|
a.textContent=x.textContent;
|
|
58
60
|
li.appendChild(a)
|
|
59
61
|
switch(x.nodeName){
|
|
@@ -86,4 +88,10 @@
|
|
|
86
88
|
<h3>h-2-2</h3>
|
|
87
89
|
test
|
|
88
90
|
<h2>h-3</h2>
|
|
91
|
+
<!-- 頭出しするためダミーのbr -->
|
|
92
|
+
<br><br><br><br><br><br><br><br><br><br><br>
|
|
93
|
+
<br><br><br><br><br><br><br><br><br><br><br>
|
|
94
|
+
<br><br><br><br><br><br><br><br><br><br><br>
|
|
95
|
+
<br><br><br><br><br><br><br><br><br><br><br>
|
|
96
|
+
|
|
89
97
|
```
|
2
調整
answer
CHANGED
|
@@ -37,4 +37,53 @@
|
|
|
37
37
|
<h3>h-2-2</h3>
|
|
38
38
|
test
|
|
39
39
|
<h2>h-3</h2>
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
# 調整版
|
|
43
|
+
```javascript
|
|
44
|
+
<style>
|
|
45
|
+
.h3{background-Color:yellow}
|
|
46
|
+
</style>
|
|
47
|
+
<script>
|
|
48
|
+
window.addEventListener('DOMContentLoaded', ()=>{
|
|
49
|
+
var menu=document.querySelector('#index');
|
|
50
|
+
var ul=document.createElement('ul');
|
|
51
|
+
menu.appendChild(ul);
|
|
52
|
+
[].forEach.call(document.querySelectorAll('h2,h3'),x=>{
|
|
53
|
+
var li=document.createElement('li');
|
|
54
|
+
ul.appendChild(li);
|
|
55
|
+
var a=document.createElement('a');
|
|
56
|
+
a.setAttribute('href','#');
|
|
57
|
+
a.textContent=x.textContent;
|
|
58
|
+
li.appendChild(a)
|
|
59
|
+
switch(x.nodeName){
|
|
60
|
+
case "H2":
|
|
61
|
+
/* h2特有の処理がないので空 */
|
|
62
|
+
break;
|
|
63
|
+
case "H3":
|
|
64
|
+
li.classList.add('h3');
|
|
65
|
+
break;
|
|
66
|
+
}
|
|
67
|
+
});
|
|
68
|
+
});
|
|
69
|
+
</script>
|
|
70
|
+
<div id="index">
|
|
71
|
+
<p class="toc-title">目次</p>
|
|
72
|
+
<!-- ここに目次が<ul><li></li></ul>の形で表示される -->
|
|
73
|
+
</div>
|
|
74
|
+
<h2>h-1</h2>
|
|
75
|
+
test
|
|
76
|
+
<h3>h-1-1</h3>
|
|
77
|
+
test
|
|
78
|
+
<h3>h-1-2</h3>
|
|
79
|
+
test
|
|
80
|
+
<h2>h-2</h2>
|
|
81
|
+
test
|
|
82
|
+
<h3>h-2-1</h3>
|
|
83
|
+
test
|
|
84
|
+
<h3>h-2-2</h3>
|
|
85
|
+
test
|
|
86
|
+
<h3>h-2-2</h3>
|
|
87
|
+
test
|
|
88
|
+
<h2>h-3</h2>
|
|
40
89
|
```
|
1
chousei
answer
CHANGED
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
li.appendChild(a)
|
|
13
13
|
switch(x.nodeName){
|
|
14
14
|
case "H2":
|
|
15
|
+
/* h2特有の処理がないので空 */
|
|
15
16
|
break;
|
|
16
17
|
case "H3":
|
|
17
18
|
li.classList.add('h3');
|