グノシーのようなタブをクリックorスライドでページをいったりきたりしたい
タイトルどうりなのですが、タブクリックとスライド機能を使ってページを切り替えたく、また他のページからもタブをクリックでその場所に飛べるようにしたいです。
ちなみにタブはヘッダー的な感じでどのページでも表示はさせておく感じにしています。
やり方としては下記URLのやり方をそっくりそのまま使わせていただいているのですが、
参照:スマートニュースやグノシーのような、スワイプタブ切替機能を実装する
このやり方だと他のページにいる時にタブをクリックしても、そのページのカテゴリーの箇所に遷移できませんでした。(カテゴリーの内容を全て同じHTMLに書いているため)
そのため、<a href="index.html#jamp"></a>のようにアンカーリンクを使って遷移させたのですが、
そのやり方だとそのページに遷移できたとしても、タブをクリックしたりスライドしたりすると、タブの現在の位置とコンテンツのスライドのページがずれてしまいます。。
この記事以外にやり方を書いているところがなかったので、このやり方以外だと方法がわかりません。
どなたかやり方がわかる方がいれば教えていただきたいです。
よろしくお願いいたします。
jquery
1$(document).ready(function(){ 2 3 /****************************************** 4 事前準備 5 *******************************************/ 6 7 //タブボタンの数を取得 8 var tabQuantity = $('.tab__button').length; 9 10 //タブの長さとボディの長さの差分を取得 11 var tabExtraDistance = $('.tab').width() - $('.tabContainer').width(); 12 13 /****************************************** 14 スライダー発動 15 *******************************************/ 16 17 var slider = $('.contents').bxSlider({ 18 pager:false, 19 controls:false, 20 onSlideBefore: function($slideElement, oldIndex, newIndex){ 21 //スライドする時に関数を呼び出す。newIndexはスライダーの現在地。 22 slideChange(newIndex); 23 } 24 }); 25 26 /****************************************** 27 スライドする時に発動する関数。タブの表示調整を行う。 28 *******************************************/ 29 30 function slideChange(newIndex){ 31 32 //クラスを調整 33 $('.tab__button').removeClass('active'); 34 $('.tab > div:nth-child(' + ( newIndex + 1 ) + ')').addClass('active'); 35 36 //スクロールするべき距離を取得。タブ全体の長さ / ( タブの個数 - 1 ) * スライドの現在地 37 var scrollDestination = ( tabExtraDistance / (tabQuantity - 1) ) * ( newIndex ); 38 39 //スクロール位置を調整 40 $('.tabContainer').animate({ scrollLeft: scrollDestination }, 'slow'); 41 42 } 43 44 /****************************************** 45 タブボタンクリックで発動する関数 46 *******************************************/ 47 48 $('.tab__button').on('click',function(e){ 49 50 //何番目の要素かを取ってスライドを移動する 51 var nth = $('.tab__button').index(this); 52 slider.goToSlide(nth); 53 54 //クリックイベントを無効化 55 e.preventDefault(); 56 57 }) 58 59}); 60
*jquery3系とbxsliderは相性が悪いそうなので、
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.1.2/jquery.bxslider.min.js"></script>を使用しています。
*コードに関してはcss以外そのままスマートニュースやグノシーのような、スワイプタブ切替機能を実装するを使用しています。
あなたの回答
tips
プレビュー