JavaScript

jquery.responsiveTabs.jsを使ってレスポンシブ対応のタブ切替方法

  /

現在のWeb開発では、レスポンシブデザインが求められています。
この記事では、jquery.responsiveTabs.jsを使用して、コンテンツエリアをタブ表示にし、スマートフォンではアコーディオン形式で切り替えられるようにする方法を詳しく解説します。

Contents

レスポンシブ対応のタブ切替の基本CSS

以下は、レスポンシブ対応のタブ切替表示エリア（.r-tabs）のCSS記述例です。必要に応じて、カスタマイズしてください。

<style type="text/css">
body{
  text-align: center;
}
h1{
  text-align: center;
  font-size: 22px;
  padding: 20px 0;
  line-height: 2em;
}


.r-tabs .r-tabs-nav {
    margin: 0;
    padding: 0;
}

.r-tabs .r-tabs-tab {
    display: inline-block;
    margin: 0;
    list-style: none;
}

.r-tabs .r-tabs-panel {
    padding: 15px;
    display: none;
}

.r-tabs .r-tabs-accordion-title {
    display: none;
}

.r-tabs .r-tabs-panel.r-tabs-state-active {
    display: block;
}

/* Accordion responsive breakpoint */
@media only screen and (max-width: 768px) {
    .r-tabs .r-tabs-nav {
        display: none;
    }

    .r-tabs .r-tabs-accordion-title {
        display: block;
    }
}

/* Tabs container */
.r-tabs {
  position: relative;

  background-color: #00c5ad;

  border-top: 1px solid #00c5ad;
  border-right: 1px solid #00c5ad;
  border-left: 1px solid #00c5ad;
  border-bottom: 4px solid #00c5ad;
  border-radius: 4px;

}

/* Tab element */
.r-tabs .r-tabs-nav .r-tabs-tab {
  position: relative;
  background-color: #00c5ad;
}

/* Tab anchor */
.r-tabs .r-tabs-nav .r-tabs-anchor {
  display: inline-block;
  padding: 10px 12px;

  text-decoration: none;
  text-shadow: 0 1px rgba(0, 0, 0, 0.4);
  font-size: 14px;
  font-weight: bold;
  color: #fff;
}

/* Disabled tab */
.r-tabs .r-tabs-nav .r-tabs-state-disabled {
  opacity: 0.5;
}

/* Active state tab anchor */
.r-tabs .r-tabs-nav .r-tabs-state-active .r-tabs-anchor {
  color: #00c5ad;
  text-shadow: none;

  background-color: white;

  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}

/* Tab panel */
.r-tabs .r-tabs-panel {
  background-color: white;

  border-bottom: 4px solid white;

  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;

}

/* Accordion anchor */
.r-tabs .r-tabs-accordion-title .r-tabs-anchor {
  display: block;
  padding: 10px;

  background-color: #00c5ad;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-shadow: 0 1px rgba(0, 0, 0, 0.4);
  font-size: 14px;

  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}

/* Active accordion anchor */
.r-tabs .r-tabs-accordion-title.r-tabs-state-active .r-tabs-anchor {
  background-color: #fff;
  color: #00c5ad;
  text-shadow: none;
}

/* Disabled accordion button */
.r-tabs .r-tabs-accordion-title.r-tabs-state-disabled {
  opacity: 0.5;
}
</style>

HTML構造

次に、HTMLの構造を確認します。タブエリアとその内容を定義します。
タブコンテンツエリア（id=”horizontalTab”）にタブクリックエリアのリストタグと切替コンテンツエリア（id=”tab-1″～id=”tab-4″）を用意します。

    <div id="horizontalTab">
        <ul>
            <li><a href="#tab-1">TAB-1</a></li>
            <li><a href="#tab-2">TAB-2</a></li>
            <li><a href="#tab-3">TAB-3</a></li>
            <li><a href="#tab-4">TAB-4</a></li>
        </ul>

        <div id="tab-1">
            <p>TAB-1コンテンツエリアTAB-1コンテンツエリアTAB-1コンテンツエリアTAB-1コンテンツエリアTAB-1コンテンツエリアTAB-1コンテンツエリアTAB-1コンテンツエリアTAB-1コンテンツエリアTAB-1コンテンツエリアTAB-1コンテンツエリア</p>
        </div>
        <div id="tab-2">
            <p>TAB-2コンテンツエリアTAB-2コンテンツエリアTAB-2コンテンツエリアTAB-2コンテンツエリアTAB-2コンテンツエリアTAB-2コンテンツエリアTAB-2コンテンツエリアTAB-2コンテンツエリアTAB-2コンテンツエリアTAB-2コンテンツエリアTAB-2コンテンツエリアTAB-2コンテンツエリアTAB-2コンテンツエリアTAB-2コンテンツエリア</p>
        </div>
        <div id="tab-3">
            <p>TAB-3コンテンツエリアTAB-3コンテンツエリアTAB-3コンテンツエリア</p>
        </div>
        <div id="tab-4">
            <p>TAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリア</p>
        </div>
    </div>

JavaScriptの実装

最後に、jquery.responsiveTabs.jsを利用してタブ切替を動作させるためのJavaScriptコードです。
jquery-2.1.0.min.js、jquery.responsiveTabs.jsファイルを読み込みます。$(‘タブ切替コンテンツエリア’).responsiveTabs({オプション})を設定します。
以下のコードをコピーして使用してください。

    <script src="jquery-2.1.0.min.js"></script>
    <script src="jquery.responsiveTabs.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#horizontalTab').responsiveTabs({
                rotate: false,
                startCollapsed: 'accordion',
                collapsible: 'accordion',
                setHash: true,
                click: function(e, tab) {
                },
                activate: function(e, tab) {
                },
                activateState: function(e, state) {
                }
            });
        });
    </script>

jquery.responsiveTabs.jsを使ってレスポンシブ対応のタブ切替表示デモページ

実際の動作を確認するには、以下のデモページをご覧ください。
jquery.responsiveTabs.jsを使ってレスポンシブ対応のタブ切替表示デモページ

ソース元：jQuery Responsive Tabs

詳細は、公式ドキュメントを参照してください。
jQuery Responsive Tabs

まとめ

jquery.responsiveTabs.jsを使用することで、簡単にレスポンシブなタブ切替を実現できます。
この記事では、基本的なCSS、HTML、JavaScriptの実装方法を紹介しました。必要に応じて、デザインや機能を拡張し、自分のプロジェクトに最適な形で活用してください。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

jquery.responsiveTabs.js タブ切替
関連記事