回答編集履歴

2

追記です

2018/11/14 17:43

投稿

akihiro3
akihiro3

スコア955

test CHANGED
@@ -243,3 +243,159 @@
243
243
  ```
244
244
 
245
245
  [参照](https://dragalialost.gamepedia.com/3D_Model_Viewer)
246
+
247
+ 追記
248
+
249
+ ---
250
+
251
+ ```html
252
+
253
+ <!DOCTYPE html>
254
+
255
+ <html lang="ja">
256
+
257
+ <head>
258
+
259
+ <meta charset="utf-8">
260
+
261
+ <title>iframe</title>
262
+
263
+ <style>
264
+
265
+ iframe {
266
+
267
+ display: none;
268
+
269
+ width: 500px;
270
+
271
+ height: 500px;
272
+
273
+ background: #ccc;
274
+
275
+ }
276
+
277
+
278
+
279
+ .iframe1 {
280
+
281
+ background: #ccc;
282
+
283
+ }
284
+
285
+
286
+
287
+ .iframe2 {
288
+
289
+ background: #f00;
290
+
291
+ }
292
+
293
+
294
+
295
+ .iframe3 {
296
+
297
+ background: #f0f;
298
+
299
+ }
300
+
301
+
302
+
303
+ .iframe4 {
304
+
305
+ background: #00f;
306
+
307
+ }
308
+
309
+
310
+
311
+ </style>
312
+
313
+ </head>
314
+
315
+ <body>
316
+
317
+ <select class="select" name="name">
318
+
319
+ <option value="op1">iframe1</option>
320
+
321
+ <option value="op2">iframe2</option>
322
+
323
+ <option value="op3">iframe3</option>
324
+
325
+ <option value="op4">iframe4</option>
326
+
327
+ </select>
328
+
329
+ <button type="button" name="button" class="btn">button</button>
330
+
331
+
332
+
333
+ <iframe src="" class="iframe1"></iframe>
334
+
335
+ <iframe src="" class="iframe2"></iframe>
336
+
337
+ <iframe src="" class="iframe3"></iframe>
338
+
339
+ <iframe src="" class="iframe4"></iframe>
340
+
341
+
342
+
343
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
344
+
345
+ <script>
346
+
347
+ $(function() {
348
+
349
+ var value;
350
+
351
+
352
+
353
+ $('.btn').on('click', function() {
354
+
355
+ $('iframe').css({display:'none'});
356
+
357
+ value = $("select[name='name']").val();
358
+
359
+
360
+
361
+ switch (value) {
362
+
363
+ case "op1":
364
+
365
+ $('.iframe1').css({display:'block'});
366
+
367
+ break;
368
+
369
+ case "op2":
370
+
371
+ $('.iframe2').css({display:'block'});
372
+
373
+ break;
374
+
375
+ case "op3":
376
+
377
+ $('.iframe3').css({display:'block'});
378
+
379
+ break;
380
+
381
+ case "op4":
382
+
383
+ $('.iframe4').css({display:'block'});
384
+
385
+ break;
386
+
387
+ }
388
+
389
+ });
390
+
391
+
392
+
393
+ });
394
+
395
+ </script>
396
+
397
+ </body>
398
+
399
+ </html>
400
+
401
+ ```

1

追記です

2018/11/14 17:43

投稿

akihiro3
akihiro3

スコア955

test CHANGED
@@ -1,4 +1,4 @@
1
- どうぞ
1
+ どうぞ(コピペです)
2
2
 
3
3
  ```html
4
4