回答編集履歴
1
追記
test
CHANGED
|
@@ -109,3 +109,53 @@
|
|
|
109
109
|
</body>
|
|
110
110
|
|
|
111
111
|
```
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
追記
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
ほかに邪魔する要素がないと仮定すればこうできます
|
|
120
|
+
|
|
121
|
+
```html
|
|
122
|
+
|
|
123
|
+
const root = document;//.getElementById("親のID");
|
|
124
|
+
|
|
125
|
+
const buttons = root.getElementsByTagName("button");
|
|
126
|
+
|
|
127
|
+
const pList= root.getElementsByTagName("p");
|
|
128
|
+
|
|
129
|
+
console.assert(pList.length === buttons.length);
|
|
130
|
+
|
|
131
|
+
for(let i=0; i<buttons.length; i++){
|
|
132
|
+
|
|
133
|
+
buttons[i].addEventListener("click",()=>{
|
|
134
|
+
|
|
135
|
+
for(let j=0; j<buttons.length; j++){
|
|
136
|
+
|
|
137
|
+
if(j === i){
|
|
138
|
+
|
|
139
|
+
pList[j].style.display = "block";
|
|
140
|
+
|
|
141
|
+
buttons[j].style.backgroundColor = "yellow";
|
|
142
|
+
|
|
143
|
+
}else{
|
|
144
|
+
|
|
145
|
+
pList[j].style.display = "none"
|
|
146
|
+
|
|
147
|
+
buttons[j].style.backgroundColor = "grey";
|
|
148
|
+
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
});
|
|
154
|
+
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
うまく動かなかったら親要素を詳細に指定するなり，得られた要素リストにフィルターかけるなりしてください
|
|
160
|
+
|
|
161
|
+
idだけではこれが限界だと思います
|