質問編集履歴

2

「前提・実現したいこと」個所に一部追記不足があったので付け足しました。

2017/11/27 01:04

投稿

kiwoharu
kiwoharu

スコア7

test CHANGED
File without changes
test CHANGED
@@ -1,5 +1,13 @@
1
1
  ###前提・実現したいこと
2
2
 
3
+ **【2017/11/27追記】**
4
+
5
+ **HTML・CSSソース、全て記載しました。HTML・CSS・JSは参考サイトのソースをそのまま記述しています。**
6
+
7
+
8
+
9
+
10
+
3
11
  ■ [スマートニュースやグノシーのような、スワイプタブ切替機能を実装する](https://www.tam-tam.co.jp/tipsnote/html_css/post9210.html)
4
12
 
5
13
 
@@ -537,9 +545,3 @@
537
545
  スワイプタブそれぞれ違った動きなどの指定は特にないので、複数設置してもそれぞれ動くように書き換えられればと考えています。
538
546
 
539
547
  この場合、どのように書き換えれば対応可能なのでしょうか?ご教示お願いいたします。
540
-
541
-
542
-
543
- **【2017/11/27追記】**
544
-
545
- HTML・CSSソース、全て記載しました。HTML・CSS・JSは参考サイトのソースをそのまま記述しています。

1

HTMLソースを全て記載しました。このままコピペしてHTMLファイルとして保存頂ければ動きます。

2017/11/27 01:04

投稿

kiwoharu
kiwoharu

スコア7

test CHANGED
File without changes
test CHANGED
@@ -36,123 +36,491 @@
36
36
 
37
37
  ```ここに言語を入力
38
38
 
39
- $(document).ready(function(){
40
-
41
-
42
-
43
- /******************************************
44
-
45
- 事前準備
46
-
47
- *******************************************/
48
-
49
-
50
-
51
- //タブボタンの数を取得
52
-
53
- var tabQuantity = $('.tab__button').length;
54
-
55
-
56
-
57
- //タブの長さとボディの長さの差分を取得
58
-
59
- var tabExtraDistance = $('.tab').width() - $('.tabContainer').width();
60
-
61
-
62
-
63
- /******************************************
64
-
65
- スライダー発動
66
-
67
- *******************************************/
68
-
69
-
70
-
71
- var slider = $('.contents').bxSlider({
72
-
73
- pager:false,
74
-
75
- controls:false,
76
-
77
- onSlideBefore: function($slideElement, oldIndex, newIndex){
78
-
79
- //スラドする時に関数を呼び出す。newIndexはスライダーの現在地。
80
-
81
- slideChange(newIndex);
82
-
83
- }
84
-
85
- });
86
-
87
-
88
-
89
- /******************************************
90
-
91
- スライドする時に発動する関数。タブの表示調整を行う。
92
-
93
- *******************************************/
94
-
95
-
96
-
97
- function slideChange(newIndex){
98
-
99
-
100
-
101
- //クラスを調整
102
-
103
- $('.tab__button').removeClass('active');
104
-
105
- $('.tab > div:nth-child(' + ( newIndex + 1 ) + ')').addClass('active');
106
-
107
-
108
-
109
- //スクロールするべき距離を取得。タブ全体の長さ / ( タブの個数 - 1 ) * スライドの現在地
110
-
111
- var scrollDestination = ( tabExtraDistance / (tabQuantity - 1) ) * ( newIndex );
112
-
113
-
114
-
115
- //スクロール位置を調整
116
-
117
- $('.tabContainer').animate({ scrollLeft: scrollDestination }, 'slow');
118
-
119
-
120
-
121
- }
122
-
123
-
124
-
125
- /******************************************
126
-
127
- タブボタンクリックで発動する関数
128
-
129
- *******************************************/
130
-
131
-
132
-
133
- $('.tab__button').on('click',function(e){
134
-
135
-
136
-
137
- //何番目の要素かを取ってスライドを移動する
138
-
139
- var nth = $('.tab__button').index(this);
140
-
141
- slider.goToSlide(nth);
142
-
143
-
144
-
145
- //クリックイベントを無効化
146
-
147
- e.preventDefault();
148
-
149
-
150
-
151
- })
152
-
153
-
154
-
155
- });
39
+ <!doctype html>
40
+
41
+ <html lang="ja">
42
+
43
+ <head>
44
+
45
+ <meta charset="utf-8">
46
+
47
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
48
+
49
+
50
+
51
+ <!-- TITLE -->
52
+
53
+ <title>スワイプタブ切り替え</title>
54
+
55
+
56
+
57
+ <!-- META -->
58
+
59
+ <meta name="keywords" content="">
60
+
61
+ <meta name="description" content="">
62
+
63
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
64
+
65
+ <meta name="format-detection" content="telephone=no">
66
+
67
+
68
+
69
+ <!-- CSS -->
70
+
71
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" />
72
+
73
+ <style type="text/css">
74
+
75
+ <!-- ▼_____________ スワイプタブ切替用CSS : START _____________▼ -->
76
+
77
+ body{
78
+
79
+ font-family:-apple-system,’Lucida Grande’,‘Helvetica Neue’,’Hiragino Kaku Gothic ProN’,‘游ゴシック’,’メリオ’,meiryo,sans-serif;
80
+
81
+ -webkit-text-size-adjust: 100%;
82
+
83
+ }
84
+
85
+ .container{
86
+
87
+ max-width: 400px;
88
+
89
+ margin: auto;
90
+
91
+ }
92
+
93
+ .tabContainer {
94
+
95
+ overflow-x: auto;
96
+
97
+ }
98
+
99
+ .tabContainer::-webkit-scrollbar {
100
+
101
+ height: 5px;
102
+
103
+ }
104
+
105
+ .tabContainer::-webkit-scrollbar-track {
106
+
107
+ background: #000;
108
+
109
+ }
110
+
111
+ .tabContainer::-webkit-scrollbar-thumb {
112
+
113
+ background: #000;
114
+
115
+ }
116
+
117
+ .tab{
118
+
119
+ display: table;
120
+
121
+ margin-top: 20px;
122
+
123
+ }
124
+
125
+ .tab__button{
126
+
127
+ display: table-cell;
128
+
129
+ text-align: center;
130
+
131
+ background-color: #000;
132
+
133
+ vertical-align: middle;
134
+
135
+ border: 2px solid white;
136
+
137
+ border-bottom-width: 4px;
138
+
139
+ min-width: 80px;
140
+
141
+ }
142
+
143
+ .tab__button.active{
144
+
145
+ border-bottom: none;
146
+
147
+ }
148
+
149
+ .tab__button a{
150
+
151
+ padding: 10px;
152
+
153
+ color: #fff;
154
+
155
+ display: block;
156
+
157
+ text-decoration: none;
158
+
159
+ font-size: 12px;
160
+
161
+ }
162
+
163
+ .contents__content{
164
+
165
+ background-color: #ccc;
166
+
167
+ text-align: center;
168
+
169
+ }
170
+
171
+ .contents__content div{
172
+
173
+ clear: left;
174
+
175
+ }
176
+
177
+ .contents__content div a{
178
+
179
+ display: table;
180
+
181
+ width: 100%;
182
+
183
+ text-decoration: none;
184
+
185
+ padding: 10px;
186
+
187
+ border-bottom:1px solid #000;
188
+
189
+ color:#222;
190
+
191
+ text-align: left;
192
+
193
+ line-height: 1.5em;
194
+
195
+ font-size: 14px;
196
+
197
+ }
198
+
199
+ .contents__content div a span{
200
+
201
+ display: table-cell;
202
+
203
+ padding-left: 10px;
204
+
205
+ padding-right: 10px;
206
+
207
+ }
208
+
209
+ .contents__content div a:before{
210
+
211
+ content:'';
212
+
213
+ width: 50px;
214
+
215
+ height: 50px;
216
+
217
+ display: block;
218
+
219
+ background-color: #fff;
220
+
221
+ display: table-cell;
222
+
223
+ }
224
+
225
+ <!-- ▲_____________ スワイプタブ切替用CSS : END _____________▲ -->
226
+
227
+ </style>
228
+
229
+ </head>
230
+
231
+ <body>
232
+
233
+ <div class="wrapper">
234
+
235
+
236
+
237
+ <!-- ▼_____________ HTMLソース : START _____________▼ -->
238
+
239
+ <div class="container">
240
+
241
+ <div class="tabContainer">
242
+
243
+ <div class="tab">
244
+
245
+ <div class="tab__button active"><a href="#">トップ</a></div>
246
+
247
+ <div class="tab__button"><a href="#">エンタメ</a></div>
248
+
249
+ <div class="tab__button"><a href="#">スポーツ</a></div>
250
+
251
+ <div class="tab__button"><a href="#">グルメ</a></div>
252
+
253
+ <div class="tab__button"><a href="#">コラム</a></div>
254
+
255
+ <div class="tab__button"><a href="#">国内</a></div>
256
+
257
+ </div>
258
+
259
+ </div>
260
+
261
+ <div class="contents">
262
+
263
+
264
+
265
+ <div class="contents__content">
266
+
267
+ <div><a href="#"><span>トップコンテンツトップコンテンツトップコンテンツトップコンテンツトップコンテンツ</span></a></div>
268
+
269
+ <div><a href="#"><span>トップコンテンツトップコンテンツトップコンテンツトップコンテンツトップコンテンツ</span></a></div>
270
+
271
+ <div><a href="#"><span>トップコンテンツトップコンテンツトップコンテンツトップコンテンツトップコンテンツ</span></a></div>
272
+
273
+ <div><a href="#"><span>トップコンテンツトップコンテンツトップコンテンツトップコンテンツトップコンテンツ</span></a></div>
274
+
275
+ <div><a href="#"><span>トップコンテンツトップコンテンツトップコンテンツトップコンテンツトップコンテンツ</span></a></div>
276
+
277
+ <div><a href="#"><span>トップコンテンツトップコンテンツトップコンテンツトップコンテンツトップコンテンツ</span></a></div>
278
+
279
+ </div>
280
+
281
+
282
+
283
+ <div class="contents__content">
284
+
285
+ <div><a href="#"><span>エンタメコンテンツエンタメコンテンツエンタメコンテンツエンタメコンテンツエンタメコンテンツ</span></a></div>
286
+
287
+ <div><a href="#"><span>エンタメコンテンツエンタメコンテンツエンタメコンテンツエンタメコンテンツエンタメコンテンツ</span></a></div>
288
+
289
+ <div><a href="#"><span>エンタメコンテンツエンタメコンテンツエンタメコンテンツエンタメコンテンツエンタメコンテンツ</span></a></div>
290
+
291
+ <div><a href="#"><span>エンタメコンテンツエンタメコンテンツエンタメコンテンツエンタメコンテンツエンタメコンテンツ</span></a></div>
292
+
293
+ <div><a href="#"><span>エンタメコンテンツエンタメコンテンツエンタメコンテンツエンタメコンテンツエンタメコンテンツ</span></a></div>
294
+
295
+ <div><a href="#"><span>エンタメコンテンツエンタメコンテンツエンタメコンテンツエンタメコンテンツエンタメコンテンツ</span></a></div>
296
+
297
+ </div>
298
+
299
+
300
+
301
+ <div class="contents__content">
302
+
303
+ <div><a href="#"><span>スポーツコンテンツスポーツコンテンツスポーツコンテンツスポーツコンテンツ</span></a></div>
304
+
305
+ <div><a href="#"><span>スポーツコンテンツスポーツコンテンツスポーツコンテンツスポーツコンテンツ</span></a></div>
306
+
307
+ <div><a href="#"><span>スポーツコンテンツスポーツコンテンツスポーツコンテンツスポーツコンテンツ</span></a></div>
308
+
309
+ <div><a href="#"><span>スポーツコンテンツスポーツコンテンツスポーツコンテンツスポーツコンテンツ</span></a></div>
310
+
311
+ <div><a href="#"><span>スポーツコンテンツスポーツコンテンツスポーツコンテンツスポーツコンテンツ</span></a></div>
312
+
313
+ <div><a href="#"><span>スポーツコンテンツスポーツコンテンツスポーツコンテンツスポーツコンテンツ</span></a></div>
314
+
315
+ </div>
316
+
317
+
318
+
319
+ <div class="contents__content">
320
+
321
+ <div><a href="#"><span>グルメコンテンツグルメコンテンツグルメコンテンツグルメコンテンツグルメコンテンツ</span></a></div>
322
+
323
+ <div><a href="#"><span>グルメコンテンツグルメコンテンツグルメコンテンツグルメコンテンツグルメコンテンツ</span></a></div>
324
+
325
+ <div><a href="#"><span>グルメコンテンツグルメコンテンツグルメコンテンツグルメコンテンツグルメコンテンツ</span></a></div>
326
+
327
+ <div><a href="#"><span>グルメコンテンツグルメコンテンツグルメコンテンツグルメコンテンツグルメコンテンツ</span></a></div>
328
+
329
+ <div><a href="#"><span>グルメコンテンツグルメコンテンツグルメコンテンツグルメコンテンツグルメコンテンツ</span></a></div>
330
+
331
+ <div><a href="#"><span>グルメコンテンツグルメコンテンツグルメコンテンツグルメコンテンツグルメコンテンツ</span></a></div>
332
+
333
+ </div>
334
+
335
+
336
+
337
+ <div class="contents__content">
338
+
339
+ <div><a href="#"><span>コラムコンテンツコラムコンテンツコラムコンテンツコラムコンテンツコラムコンテンツ</span></a></div>
340
+
341
+ <div><a href="#"><span>コラムコンテンツコラムコンテンツコラムコンテンツコラムコンテンツコラムコンテンツ</span></a></div>
342
+
343
+ <div><a href="#"><span>コラムコンテンツコラムコンテンツコラムコンテンツコラムコンテンツコラムコンテンツ</span></a></div>
344
+
345
+ <div><a href="#"><span>コラムコンテンツコラムコンテンツコラムコンテンツコラムコンテンツコラムコンテンツ</span></a></div>
346
+
347
+ <div><a href="#"><span>コラムコンテンツコラムコンテンツコラムコンテンツコラムコンテンツコラムコンテンツ</span></a></div>
348
+
349
+ <div><a href="#"><span>コラムコンテンツコラムコンテンツコラムコンテンツコラムコンテンツコラムコンテンツ</span></a></div>
350
+
351
+ </div>
352
+
353
+
354
+
355
+ <div class="contents__content">
356
+
357
+ <div><a href="#"><span>国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ</span></a></div>
358
+
359
+ <div><a href="#"><span>国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ</span></a></div>
360
+
361
+ <div><a href="#"><span>国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ</span></a></div>
362
+
363
+ <div><a href="#"><span>国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ</span></a></div>
364
+
365
+ <div><a href="#"><span>国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ</span></a></div>
366
+
367
+ <div><a href="#"><span>国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ</span></a></div>
368
+
369
+ </div>
370
+
371
+
372
+
373
+ </div>
374
+
375
+ </div>
376
+
377
+ <!-- ▲_____________ HTMLソース : END _____________▲ -->
378
+
379
+
380
+
381
+ </div><!-- /.wrapper -->
382
+
383
+
384
+
385
+
386
+
387
+ <!-- JS -->
388
+
389
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
390
+
391
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.js"></script>
392
+
393
+
394
+
395
+ <script>
396
+
397
+ $(document).ready(function(){
398
+
399
+
400
+
401
+ /******************************************
402
+
403
+ 事前準備
404
+
405
+ *******************************************/
406
+
407
+
408
+
409
+ //タブボタンの数を取得
410
+
411
+ var tabQuantity = $('.tab__button').length;
412
+
413
+
414
+
415
+ //タブの長さとボディの長さの差分を取得
416
+
417
+ var tabExtraDistance = $('.tab').width() - $('.tabContainer').width();
418
+
419
+
420
+
421
+ /******************************************
422
+
423
+ スライダー発動
424
+
425
+ *******************************************/
426
+
427
+
428
+
429
+ var slider = $('.contents').bxSlider({
430
+
431
+ pager:false,
432
+
433
+ controls:false,
434
+
435
+ onSlideBefore: function($slideElement, oldIndex, newIndex){
436
+
437
+ //スライドする時に関数を呼び出す。newIndexはスライダーの現在地。
438
+
439
+ slideChange(newIndex);
440
+
441
+ }
442
+
443
+ });
444
+
445
+
446
+
447
+ /******************************************
448
+
449
+ スライドする時に発動する関数。タブの表示調整を行う。
450
+
451
+ *******************************************/
452
+
453
+
454
+
455
+ function slideChange(newIndex){
456
+
457
+
458
+
459
+ //クラスを調整
460
+
461
+ $('.tab__button').removeClass('active');
462
+
463
+ $('.tab > div:nth-child(' + ( newIndex + 1 ) + ')').addClass('active');
464
+
465
+
466
+
467
+ //スクロールするべき距離を取得。タブ全体の長さ / ( タブの個数 - 1 ) * スライドの現在地
468
+
469
+ var scrollDestination = ( tabExtraDistance / (tabQuantity - 1) ) * ( newIndex );
470
+
471
+
472
+
473
+ //スクロール位置を調整
474
+
475
+ $('.tabContainer').animate({ scrollLeft: scrollDestination }, 'slow');
476
+
477
+
478
+
479
+ }
480
+
481
+
482
+
483
+ /******************************************
484
+
485
+ タブボタンクリックで発動する関数
486
+
487
+ *******************************************/
488
+
489
+
490
+
491
+ $('.tab__button').on('click',function(e){
492
+
493
+
494
+
495
+ //何番目の要素かを取ってスライドを移動する
496
+
497
+ var nth = $('.tab__button').index(this);
498
+
499
+ slider.goToSlide(nth);
500
+
501
+
502
+
503
+ //クリックイベントを無効化
504
+
505
+ e.preventDefault();
506
+
507
+
508
+
509
+ })
510
+
511
+
512
+
513
+ });
514
+
515
+ </script>
516
+
517
+
518
+
519
+ </body>
520
+
521
+ </html>
522
+
523
+
156
524
 
157
525
  ```
158
526
 
@@ -169,3 +537,9 @@
169
537
  スワイプタブそれぞれ違った動きなどの指定は特にないので、複数設置してもそれぞれ動くように書き換えられればと考えています。
170
538
 
171
539
  この場合、どのように書き換えれば対応可能なのでしょうか?ご教示お願いいたします。
540
+
541
+
542
+
543
+ **【2017/11/27追記】**
544
+
545
+ HTML・CSSソース、全て記載しました。HTML・CSS・JSは参考サイトのソースをそのまま記述しています。