常連

注目の的

質問力

###前提・実現したいこと
**【2017/11/27追記】**
**HTML・CSSソース、全て記載しました。HTML・CSS・JSは参考サイトのソースをそのまま記述しています。**


■ [スマートニュースやグノシーのような、スワイプタブ切替機能を実装する](https://www.tam-tam.co.jp/tipsnote/html_css/post9210.html)

グノシーやスマートニュースで実装されている、スワイプタブを導入したサイトを作成しています。
実現したいことは、スワイプタブを複数設置してもそれぞれ動くようにしたいです。
（サイトの構成上、3つ以上、別カテゴリのスワイプタブをページ内に設置します。）

**▼参考サイト** ※スマホで見てください。
[https://gunosy.com/ ](https://gunosy.com/)
[http://s.news.mynavi.jp/ ](http://s.news.mynavi.jp/)


###発生している問題・エラーメッセージ

1つだけの場合、上記サイトの通りに実装はできたのですが、複数設置した場合、全てのスワイプタブが動かなくなります。


###該当のソースコード
```ここに言語を入力
<!doctype html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	
	<title>スワイプタブ切り替え</title>

	
	<meta name="keywords" content="">
	<meta name="description" content="">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="format-detection" content="telephone=no">

	
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" />
	<style type="text/css">
		
		body{
			font-family:-apple-system,’Lucida Grande’,‘Helvetica Neue’,’Hiragino Kaku Gothic ProN’,‘游ゴシック’,’メイリオ’,meiryo,sans-serif;
			-webkit-text-size-adjust: 100%;
		}
		.container{
			max-width: 400px;
			margin: auto;
		}
		.tabContainer {
			overflow-x: auto;
		}
		.tabContainer::-webkit-scrollbar {
			height: 5px;
		}
		.tabContainer::-webkit-scrollbar-track {
			background: #000;
		}
		.tabContainer::-webkit-scrollbar-thumb {
			background: #000;
		}
		.tab{
			display: table;
			margin-top: 20px;
		}
		.tab__button{
			display: table-cell;
			text-align: center;
			background-color: #000;
			vertical-align: middle;
			border: 2px solid white;
			border-bottom-width: 4px;
			min-width: 80px;
		}
		.tab__button.active{
			border-bottom: none;
		}
		.tab__button a{
			padding: 10px;
			color: #fff;
			display: block;
			text-decoration: none;
			font-size: 12px;
		}
		.contents__content{
			background-color: #ccc;
			text-align: center;
		}
		.contents__content div{
			clear: left;
		}
		.contents__content div a{
			display: table;
			width: 100%;
			text-decoration: none;
			padding: 10px;
			border-bottom:1px solid #000;
			color:#222;
			text-align: left;
			line-height: 1.5em;
			font-size: 14px;
		}
		.contents__content div a span{
			display: table-cell;
			padding-left: 10px;
			padding-right: 10px;
		}
		.contents__content div a:before{
			content:'';
			width: 50px;
			height: 50px;
			display: block;
			background-color: #fff;
			display: table-cell;
		}
		
	</style>
</head>
<body>
	<div class="wrapper">

		
		<div class="container">
			<div class="tabContainer">
				<div class="tab">
					<div class="tab__button active"><a href="#">トップ</a></div>
					<div class="tab__button"><a href="#">エンタメ</a></div>
					<div class="tab__button"><a href="#">スポーツ</a></div>
					<div class="tab__button"><a href="#">グルメ</a></div>
					<div class="tab__button"><a href="#">コラム</a></div>
					<div class="tab__button"><a href="#">国内</a></div>
				</div>
			</div>
			<div class="contents">

				<div class="contents__content">
					<div><a href="#"><span>トップコンテンツトップコンテンツトップコンテンツトップコンテンツトップコンテンツ</span></a></div>
					<div><a href="#"><span>トップコンテンツトップコンテンツトップコンテンツトップコンテンツトップコンテンツ</span></a></div>
					<div><a href="#"><span>トップコンテンツトップコンテンツトップコンテンツトップコンテンツトップコンテンツ</span></a></div>
					<div><a href="#"><span>トップコンテンツトップコンテンツトップコンテンツトップコンテンツトップコンテンツ</span></a></div>
					<div><a href="#"><span>トップコンテンツトップコンテンツトップコンテンツトップコンテンツトップコンテンツ</span></a></div>
					<div><a href="#"><span>トップコンテンツトップコンテンツトップコンテンツトップコンテンツトップコンテンツ</span></a></div>
				</div>

				<div class="contents__content">
					<div><a href="#"><span>エンタメコンテンツエンタメコンテンツエンタメコンテンツエンタメコンテンツエンタメコンテンツ</span></a></div>
					<div><a href="#"><span>エンタメコンテンツエンタメコンテンツエンタメコンテンツエンタメコンテンツエンタメコンテンツ</span></a></div>
					<div><a href="#"><span>エンタメコンテンツエンタメコンテンツエンタメコンテンツエンタメコンテンツエンタメコンテンツ</span></a></div>
					<div><a href="#"><span>エンタメコンテンツエンタメコンテンツエンタメコンテンツエンタメコンテンツエンタメコンテンツ</span></a></div>
					<div><a href="#"><span>エンタメコンテンツエンタメコンテンツエンタメコンテンツエンタメコンテンツエンタメコンテンツ</span></a></div>
					<div><a href="#"><span>エンタメコンテンツエンタメコンテンツエンタメコンテンツエンタメコンテンツエンタメコンテンツ</span></a></div>
				</div>

				<div class="contents__content">
					<div><a href="#"><span>スポーツコンテンツスポーツコンテンツスポーツコンテンツスポーツコンテンツ</span></a></div>
					<div><a href="#"><span>スポーツコンテンツスポーツコンテンツスポーツコンテンツスポーツコンテンツ</span></a></div>
					<div><a href="#"><span>スポーツコンテンツスポーツコンテンツスポーツコンテンツスポーツコンテンツ</span></a></div>
					<div><a href="#"><span>スポーツコンテンツスポーツコンテンツスポーツコンテンツスポーツコンテンツ</span></a></div>
					<div><a href="#"><span>スポーツコンテンツスポーツコンテンツスポーツコンテンツスポーツコンテンツ</span></a></div>
					<div><a href="#"><span>スポーツコンテンツスポーツコンテンツスポーツコンテンツスポーツコンテンツ</span></a></div>
				</div>

				<div class="contents__content">
					<div><a href="#"><span>グルメコンテンツグルメコンテンツグルメコンテンツグルメコンテンツグルメコンテンツ</span></a></div>
					<div><a href="#"><span>グルメコンテンツグルメコンテンツグルメコンテンツグルメコンテンツグルメコンテンツ</span></a></div>
					<div><a href="#"><span>グルメコンテンツグルメコンテンツグルメコンテンツグルメコンテンツグルメコンテンツ</span></a></div>
					<div><a href="#"><span>グルメコンテンツグルメコンテンツグルメコンテンツグルメコンテンツグルメコンテンツ</span></a></div>
					<div><a href="#"><span>グルメコンテンツグルメコンテンツグルメコンテンツグルメコンテンツグルメコンテンツ</span></a></div>
					<div><a href="#"><span>グルメコンテンツグルメコンテンツグルメコンテンツグルメコンテンツグルメコンテンツ</span></a></div>
				</div>

				<div class="contents__content">
					<div><a href="#"><span>コラムコンテンツコラムコンテンツコラムコンテンツコラムコンテンツコラムコンテンツ</span></a></div>
					<div><a href="#"><span>コラムコンテンツコラムコンテンツコラムコンテンツコラムコンテンツコラムコンテンツ</span></a></div>
					<div><a href="#"><span>コラムコンテンツコラムコンテンツコラムコンテンツコラムコンテンツコラムコンテンツ</span></a></div>
					<div><a href="#"><span>コラムコンテンツコラムコンテンツコラムコンテンツコラムコンテンツコラムコンテンツ</span></a></div>
					<div><a href="#"><span>コラムコンテンツコラムコンテンツコラムコンテンツコラムコンテンツコラムコンテンツ</span></a></div>
					<div><a href="#"><span>コラムコンテンツコラムコンテンツコラムコンテンツコラムコンテンツコラムコンテンツ</span></a></div>
				</div>

				<div class="contents__content">
					<div><a href="#"><span>国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ</span></a></div>
					<div><a href="#"><span>国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ</span></a></div>
					<div><a href="#"><span>国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ</span></a></div>
					<div><a href="#"><span>国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ</span></a></div>
					<div><a href="#"><span>国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ</span></a></div>
					<div><a href="#"><span>国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ</span></a></div>
				</div>

			</div>
		</div>
		

	</div>


	
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.js"></script>

	<script>
		$(document).ready(function(){

			/******************************************
			事前準備
			*******************************************/

			//タブボタンの数を取得
			var tabQuantity = $('.tab__button').length;

			//タブの長さとボディの長さの差分を取得
			var tabExtraDistance = $('.tab').width() - $('.tabContainer').width();

			/******************************************
			スライダー発動
			*******************************************/

			var slider = $('.contents').bxSlider({
				pager:false,
				controls:false,
				onSlideBefore: function($slideElement, oldIndex, newIndex){
					//スライドする時に関数を呼び出す。newIndexはスライダーの現在地。
					slideChange(newIndex);
				}
			});

			/******************************************
			スライドする時に発動する関数。タブの表示調整を行う。
			*******************************************/

			function slideChange(newIndex){

				//クラスを調整
				$('.tab__button').removeClass('active');
				$('.tab > div:nth-child(' + ( newIndex + 1 ) + ')').addClass('active');

				//スクロールするべき距離を取得。タブ全体の長さ / ( タブの個数 - 1 ) * スライドの現在地
				var scrollDestination = ( tabExtraDistance / (tabQuantity - 1) ) * ( newIndex );

				//スクロール位置を調整
				$('.tabContainer').animate({ scrollLeft: scrollDestination }, 'slow');

			}

			/******************************************
			タブボタンクリックで発動する関数
			*******************************************/

			$('.tab__button').on('click',function(e){

				//何番目の要素かを取ってスライドを移動する
				var nth = $('.tab__button').index(this);
				slider.goToSlide(nth);

				//クリックイベントを無効化
				e.preventDefault();

			})

		});
	</script>

</body>
</html>

```

###試したこと
上記のJSの書き方だと、それぞれのスワイプタブに対しての動かし方じゃないのかと考え、
例えばタブボタンクリックで発動する部分においては、クリックした直近の親から、該当の要素を探して・・・
と書き換えてみたのですが書き方が悪くうまくいきませんでした。
スワイプタブそれぞれ違った動きなどの指定は特にないので、複数設置してもそれぞれ動くように書き換えられればと考えています。
この場合、どのように書き換えれば対応可能なのでしょうか？ご教示お願いいたします。