teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問ひとつのボタンアクションで複数の処理

編集履歴

質問編集履歴

2

ソースの修正

2018/09/11 05:12

投稿

dethtroy
dethtroy

スコア44

test CHANGED
File without changes
test CHANGED
@@ -34,7 +34,7 @@
34
34
 
35
35
  function move_bt01(){
36
36
 
37
- target = document.getElementById("move-in");
37
+ target = document.getElementsByClassName("move-in");
38
38
 
39
39
  target.style.marginLeft="0%";
40
40
 
@@ -42,25 +42,25 @@
42
42
 
43
43
  function move_bt02(){
44
44
 
45
- target = document.getElementById("move-in");
45
+ target = document.getElementsByClassName("move-in");
46
-
46
+
47
- target.style.marginLeft="-100%";
47
+ target.style.marginLeft="0%";
48
48
 
49
49
  }
50
50
 
51
51
  function move_bt03(){
52
52
 
53
- target = document.getElementById("move-in");
53
+ target = document.getElementsByClassName("move-in");
54
-
54
+
55
- target.style.marginLeft="-200%";
55
+ target.style.marginLeft="0%";
56
56
 
57
57
  }
58
58
 
59
59
  function move_bt04(){
60
60
 
61
- target = document.getElementById("move-in");
61
+ target = document.getElementsByClassName("move-in");
62
-
62
+
63
- target.style.marginLeft="-300%";
63
+ target.style.marginLeft="0%";
64
64
 
65
65
  }
66
66
 
@@ -90,25 +90,117 @@
90
90
 
91
91
  <style>
92
92
 
93
+ .type-list-bt{
94
+
95
+ width: 100%;
96
+
97
+ }
98
+
99
+ .type-list-bt ul{
100
+
101
+ font-size: 0;
102
+
103
+ width: 100%;
104
+
105
+ max-width: 816px;
106
+
107
+ margin:0 auto 20px;
108
+
109
+ box-sizing: border-box;
110
+
111
+ padding: 0;
112
+
113
+ margin-top: 30px;
114
+
115
+ }
116
+
117
+ .type-list-bt li{
118
+
119
+ display: inline-block;
120
+
121
+ width: 23%;
122
+
123
+ margin: 0 1%;
124
+
125
+ font-size: 14px;
126
+
127
+ background-color:#a4a4a4;
128
+
129
+ border-radius: 3px;
130
+
131
+ text-align: center;
132
+
133
+ padding: 5px;
134
+
135
+ color: #FFF;
136
+
137
+ box-sizing: border-box;
138
+
139
+ list-style: none;
140
+
141
+ cursor: pointer;
142
+
143
+ }
144
+
145
+ .active {
146
+
147
+ background-color: #329096!important;
148
+
149
+ color: #FFF!important;
150
+
151
+ border:none!important;
152
+
153
+ }
154
+
93
- .left-box{
155
+ .left-box{
94
-
156
+
95
- float: left;
157
+ float: left;
96
-
158
+
97
- width: 50%;
159
+ width: 50%;
160
+
98
-
161
+ border: solid 1px #DDD;
162
+
163
+ height: 50px;
164
+
165
+ box-sizing: border-box;
166
+
99
- }
167
+ }
100
-
168
+
101
- .right-box{
169
+ .right-box{
102
-
170
+
103
- float: right;
171
+ float: right;
104
-
172
+
105
- width: 50%;
173
+ width: 50%;
174
+
106
-
175
+ border: solid 1px #DDD;
176
+
177
+ height: 50px;
178
+
179
+ box-sizing: border-box;
180
+
181
+ overflow: hidden;
182
+
107
- }
183
+ }
108
-
184
+
109
- #move-in{
185
+ .move-in{
110
-
186
+
111
- width: 400%;
187
+ width: 400%;
188
+
189
+ background-color: #C5D1FF;
190
+
191
+ height: 40px;
192
+
193
+ }
194
+
195
+ .move-in table{
196
+
197
+ width: 100%;
198
+
199
+ }
200
+
201
+ .move-in td{
202
+
203
+ width: 25%;
112
204
 
113
205
  }
114
206
 
@@ -118,21 +210,21 @@
118
210
 
119
211
  <body>
120
212
 
121
- <div class="type-list-bt">
213
+ <div class="type-list-bt">
122
-
214
+
123
- <ul>
215
+ <ul>
124
-
216
+
125
- <a onclick="move_bt01();return false;"><li class="active">A</li></a>
217
+ <a onclick="move_bt01();return false;"><li class="active">A</li></a>
126
-
218
+
127
- <a onclick="move_bt02();return false;"><li>B</li></a>
219
+ <a onclick="move_bt02();return false;"><li>B</li></a>
128
-
220
+
129
- <a onclick="move_bt03();return false;"><li>C</li></a>
221
+ <a onclick="move_bt03();return false;"><li>C</li></a>
130
-
222
+
131
- <a onclick="move_bt04();return false;"><li>D</li></a>
223
+ <a onclick="move_bt04();return false;"><li>D</li></a>
132
-
224
+
133
- </ul>
225
+ </ul>
134
-
226
+
135
- </div>
227
+ </div>
136
228
 
137
229
 
138
230
 
@@ -140,7 +232,27 @@
140
232
 
141
233
  <div class="right-box">
142
234
 
143
- <div id="move-in"></div>
235
+ <div class="move-in">
236
+
237
+ <table width="100%" border="0">
238
+
239
+ <tbody>
240
+
241
+ <tr>
242
+
243
+ <td>a</td>
244
+
245
+ <td>b</td>
246
+
247
+ <td>c</td>
248
+
249
+ <td>d</td>
250
+
251
+ </tr>
252
+
253
+ </tbody>
254
+
255
+ </table></div>
144
256
 
145
257
  </div>
146
258
 
@@ -152,17 +264,59 @@
152
264
 
153
265
  <div class="right-box">
154
266
 
155
- <div id="move-in"></div>
267
+ <div class="move-in">
268
+
269
+ <table width="100%" border="0">
270
+
271
+ <tbody>
272
+
273
+ <tr>
274
+
275
+ <td>a</td>
276
+
277
+ <td>b</td>
278
+
279
+ <td>c</td>
280
+
281
+ <td>d</td>
282
+
283
+ </tr>
284
+
285
+ </tbody>
286
+
287
+ </table>
156
288
 
157
289
  </div>
158
290
 
291
+ </div>
292
+
159
293
 
160
294
 
161
295
  <div class="left-box"></div>
162
296
 
163
297
  <div class="right-box">
164
298
 
165
- <div id="move-in"></div>
299
+ <div class="move-in">
300
+
301
+ <table width="100%" border="0">
302
+
303
+ <tbody>
304
+
305
+ <tr>
306
+
307
+ <td>a</td>
308
+
309
+ <td>b</td>
310
+
311
+ <td>c</td>
312
+
313
+ <td>d</td>
314
+
315
+ </tr>
316
+
317
+ </tbody>
318
+
319
+ </table></div>
166
320
 
167
321
  </div>
168
322
 

1

コード修正

2018/09/11 05:12

投稿

dethtroy
dethtroy

スコア44

test CHANGED
File without changes
test CHANGED
@@ -13,6 +13,8 @@
13
13
  また一応画像にて理想の動きを記しています。![イメージ説明](a94b7761653f4b9035dc1b27ce022219.png)
14
14
 
15
15
 
16
+
17
+ ```
16
18
 
17
19
  <html>
18
20
 
@@ -171,3 +173,5 @@
171
173
  </body>
172
174
 
173
175
  </html>
176
+
177
+ ```