質問編集履歴
1
追記を入れました。
title
CHANGED
File without changes
|
body
CHANGED
@@ -22,7 +22,7 @@
|
|
22
22
|
|
23
23
|
<body>
|
24
24
|
|
25
|
-
<div id="app">
|
25
|
+
<div id="app">
|
26
26
|
|
27
27
|
<div id="content">
|
28
28
|
<img id="img" src="img/01.JPG">
|
@@ -37,7 +37,7 @@
|
|
37
37
|
|
38
38
|
</div>
|
39
39
|
</div>
|
40
|
-
|
40
|
+
</div>
|
41
41
|
</body>
|
42
42
|
</html>
|
43
43
|
```
|
@@ -114,4 +114,17 @@
|
|
114
114
|
```
|
115
115
|
※でコンソール出力するとこのように表示されました。
|
116
116
|

|
117
|
-
クリックでactiveが消えないのは、入れ子になっているからでしょうか?
|
117
|
+
クリックでactiveが消えないのは、入れ子になっているからでしょうか?
|
118
|
+
|
119
|
+
### 追記
|
120
|
+
HTMLの</div>の位置が変なところになったので直しました。
|
121
|
+
|
122
|
+
画像クリックのときのエラーは以下のようにでます。
|
123
|
+

|
124
|
+
|
125
|
+
クリックでclassのactiveをすべて消して、クリック箇所にactiveを再付与は以下のように書き替えたらできましたが、Vue.jsではエラーになってしまいます。
|
126
|
+
```javascript
|
127
|
+
let nodes = document.getElementsByClassName("thumb")
|
128
|
+
for (i = 0; i < nodes.length; i++){ nodes[i].children[0].classList.remove("active") }
|
129
|
+
b.classList.add("active")
|
130
|
+
```
|