回答編集履歴
1
追記
answer
CHANGED
@@ -53,4 +53,29 @@
|
|
53
53
|
}
|
54
54
|
</script>
|
55
55
|
</body>
|
56
|
-
```
|
56
|
+
```
|
57
|
+
|
58
|
+
追記
|
59
|
+
|
60
|
+
ほかに邪魔する要素がないと仮定すればこうできます
|
61
|
+
```html
|
62
|
+
const root = document;//.getElementById("親のID");
|
63
|
+
const buttons = root.getElementsByTagName("button");
|
64
|
+
const pList= root.getElementsByTagName("p");
|
65
|
+
console.assert(pList.length === buttons.length);
|
66
|
+
for(let i=0; i<buttons.length; i++){
|
67
|
+
buttons[i].addEventListener("click",()=>{
|
68
|
+
for(let j=0; j<buttons.length; j++){
|
69
|
+
if(j === i){
|
70
|
+
pList[j].style.display = "block";
|
71
|
+
buttons[j].style.backgroundColor = "yellow";
|
72
|
+
}else{
|
73
|
+
pList[j].style.display = "none"
|
74
|
+
buttons[j].style.backgroundColor = "grey";
|
75
|
+
}
|
76
|
+
}
|
77
|
+
});
|
78
|
+
}
|
79
|
+
```
|
80
|
+
うまく動かなかったら親要素を詳細に指定するなり,得られた要素リストにフィルターかけるなりしてください
|
81
|
+
idだけではこれが限界だと思います
|