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

質問編集履歴

1

追記を入れました。

2021/10/04 06:14

投稿

fungi
fungi

スコア2

title CHANGED
File without changes
body CHANGED
@@ -22,7 +22,7 @@
22
22
 
23
23
  <body>
24
24
 
25
- <div id="app"></div>
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
  ![イメージ説明](9da996fa8d60a7df8c97ef074c23bbcc.jpeg)
117
- クリックでactiveが消えないのは、入れ子になっているからでしょうか?
117
+ クリックでactiveが消えないのは、入れ子になっているからでしょうか?
118
+
119
+ ### 追記
120
+ HTMLの</div>の位置が変なところになったので直しました。
121
+
122
+ 画像クリックのときのエラーは以下のようにでます。
123
+ ![イメージ説明](737d9cd2c97e977fb22f035efde1d858.jpeg)
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
+ ```