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

回答編集履歴

3

サンプルコードを追加

2016/12/15 08:25

投稿

motuo
motuo

スコア3027

answer CHANGED
@@ -1,2 +1,52 @@
1
1
  ソースのコメントにある通り```$('label').hide();```が初期表示時に、Labelを隠しています。
2
- その為、この行を消してしまえばよいのではないでしょうか。
2
+ その為、この行を消してしまえばよいのではないでしょうか。
3
+ ```html
4
+ <html>
5
+ <head>
6
+ <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
7
+ <script>
8
+ $(function() {
9
+ //This hides all initial textboxes
10
+ //$('label').hide();
11
+ $('#ons').change(function() {
12
+ //This saves some time by caching the jquery value
13
+ var val = $(this).val();
14
+ //this hides any boxes that the previous selection might have left open
15
+ $('label').hide();
16
+ //This just opens the ones we want based off the selection
17
+ $('.' + val).show();
18
+ });
19
+ //I'm not really sure why these are here
20
+ $("input")
21
+ .focus(function () {
22
+ $(this).next("span").fadeIn(1000);
23
+ })
24
+ .blur(function () {
25
+ $(this).next("span").fadeOut(1000);
26
+ });
27
+ });
28
+ </script>
29
+ </head>
30
+ <body>
31
+ <form>
32
+ <select id="ons">
33
+ <option value="13">第13号 2016 autumn</option>
34
+ <option value="12">第12号 2016 spring</option>
35
+ <option value="11">第11号 2016 winter</option>
36
+ </select>
37
+ </form>
38
+ <label id="label1" for="13" class="13">
39
+ <div class="image paper"><a href="url" target="_blank"><img src="写真" width="780" alt=""/></a></div>
40
+ <div class="btn trans"><a href="url"><span>PDFダウンロード</span></a></div>
41
+ </label>
42
+ <label id="label2" for="12" class="12">
43
+ <div class="image paper"><a href="url" target="_blank"><img src="写真" width="780" alt=""/></a></div>
44
+ <div class="btn trans"><a href="url"><span>PDFダウンロード</span></a></div>
45
+ </label>
46
+ <label id="label3" for="11" class="11">
47
+ <div class="image paper"><a href="url" target="_blank"><img src="写真" width="780" alt=""/></a></div>
48
+ <div class="btn trans"><a href="url"><span>PDFダウンロード</span></a></div>
49
+ </label>
50
+ </body>
51
+ </html>
52
+ ```

2

サンプルコードを追加

2016/12/15 08:25

投稿

motuo
motuo

スコア3027

answer CHANGED
File without changes

1

サンプルコードを追加

2016/12/15 08:24

投稿

motuo
motuo

スコア3027

answer CHANGED
File without changes