回答編集履歴

1

li -> div

2019/10/02 15:27

投稿

kokemomo.sour
kokemomo.sour

スコア330

test CHANGED
@@ -15,3 +15,207 @@
15
15
  ```
16
16
 
17
17
  とするといかがですか
18
+
19
+
20
+
21
+
22
+
23
+ 追記:
24
+
25
+ 以下だといかがでしょうか
26
+
27
+
28
+
29
+ ```
30
+
31
+ <div class="wrapper">
32
+
33
+ <p class="message">↓のボタンをクリックしてください↓</p>
34
+
35
+ <div class="sortNav">
36
+
37
+ <div class="btnGreen">Green</div>
38
+
39
+ <div class="btnRed">Red</div>
40
+
41
+ <div class="btnBlue">Blue</div>
42
+
43
+ <div class="btnAll">All</div>
44
+
45
+ </div>
46
+
47
+ <div class="container">
48
+
49
+ <div class="green">sample</div>
50
+
51
+ <div class="blue">sample</div>
52
+
53
+ <div class="red">sample</div>
54
+
55
+ <div class="green">sample</div>
56
+
57
+ <div class="blue">sample</div>
58
+
59
+ <div class="red">sample</div>
60
+
61
+ <div class="green">sample</div>
62
+
63
+ <div class="blue">sample</div>
64
+
65
+ <div class="red">sample</div>
66
+
67
+ <div class="green">sample</div>
68
+
69
+ <div class="blue">sample</div>
70
+
71
+ <div class="red">sample</div>
72
+
73
+ <div class="green">sample</div>
74
+
75
+ <div class="blue">sample</div>
76
+
77
+ <div class="red">sample</div>
78
+
79
+ </div>
80
+
81
+ </div>
82
+
83
+
84
+
85
+ <style>
86
+
87
+ .wrapper {
88
+
89
+ width:600px;
90
+
91
+ margin: 30px auto;
92
+
93
+ }
94
+
95
+ .message {
96
+
97
+ margin-bottom: 10px;
98
+
99
+ }
100
+
101
+ .sortNav {
102
+
103
+ overflow: hidden;
104
+
105
+ margin-bottom: 30px;
106
+
107
+ }
108
+
109
+ .sortNav div {
110
+
111
+ list-style:none;
112
+
113
+ float: left;
114
+
115
+ margin-left: 10px;
116
+
117
+ color: #fff;
118
+
119
+ font-weight: bold;
120
+
121
+ padding: 5px 10px;
122
+
123
+ cursor: pointer;
124
+
125
+ border-radius: 15px;
126
+
127
+ }
128
+
129
+ .green,.blue,.red {
130
+
131
+ width: 50px;
132
+
133
+ height: 50px;
134
+
135
+ line-height: 50px;
136
+
137
+ verticel-align: middle;
138
+
139
+ text-align: center;
140
+
141
+ margin: 10px;
142
+
143
+ font-size: 10px;
144
+
145
+ color: #fff;
146
+
147
+ float: left;
148
+
149
+ }
150
+
151
+ .green, .btnGreen {
152
+
153
+ background-color: #238C00;
154
+
155
+
156
+
157
+ }
158
+
159
+ .blue, .btnBlue {
160
+
161
+ background-color: #00f;
162
+
163
+ }
164
+
165
+ .red, .btnRed {
166
+
167
+ background-color: #f00;
168
+
169
+ }
170
+
171
+ .btnAll {
172
+
173
+ background-color: #999;
174
+
175
+ }
176
+
177
+ </style>
178
+
179
+ <script
180
+
181
+ src="https://code.jquery.com/jquery-3.4.1.min.js"
182
+
183
+ integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
184
+
185
+ crossorigin="anonymous"></script>
186
+
187
+ <script>
188
+
189
+ $(function(){
190
+
191
+ $('.sortNav div').each(function(){
192
+
193
+ $(this).click(function(){
194
+
195
+ var btnName = $(this).attr("class").substring(3).toLowerCase();
196
+
197
+ var className = '.';
198
+
199
+ className += btnName;
200
+
201
+ if(btnName == 'all') {
202
+
203
+ $('.container > div').fadeIn(200);
204
+
205
+ } else {
206
+
207
+ $('.container div:not(className)').hide();
208
+
209
+ $(className).fadeIn(200);
210
+
211
+ }
212
+
213
+ });
214
+
215
+ });
216
+
217
+ });
218
+
219
+ </script>
220
+
221
+ ```