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

回答編集履歴

1

追記

2021/05/09 07:38

投稿

taC-h
taC-h

スコア289

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だけではこれが限界だと思います