【jQuery】タブ切り替えの中でタブ切り替え（２重のタブ切り替え）を実装するコード

2019年7月23日jQuery

【jQuery】タブ切り替えの中でタブ切り替え（２重のタブ切り替え）を実装するコード

今回はよくあるjQueryを用いたタブ切り替えの拡張版として、各タブの中にさらにページャー（タブ切り替え）がある場合の、２重のタブを操作したい場合の実装方法をシェアします。

DEMO

どのような動きになるか、まずはプログラム動作デモを用意しましたので下記リンクより確認ください。

» jQueryで２重のタブ切り替えを実装するサンプル

設置方法

jQuery本体の読み込み

CDNで配布されています。下記コードをそのまま＜head＞内に記述します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

jQuery実行コード

こちらのコードをjQuery本体よりも下部に記述します。

<script type="text/javascript">
    $(function(){
        //tabをクリックしたときの動作
        $('.tab li').click(function(){
            //クリックしたタブのindexを取得
            var index = $('.tab li').index(this);

            $('.list .inner').hide().removeClass('active');
            $('.list .inner').eq(index).fadeIn().addClass('active');

            $('.tab li').removeClass('active');
            $(this).addClass('active');
        });

        //ページャーをクリックしたときの動作
        $('.tab_sub li').click(function(){
            //クリックしたページャーのindexを取得
            var index = $('.inner.active .tab_sub li').index(this);

            $('.inner.active .tab_sub li').removeClass('active');
            $(this).addClass('active');

            //テーブル操作
            $('.inner.active table').hide().removeClass('active');
            $('.inner.active table').eq(index).fadeIn().addClass('active');
        });
    });
</script>

HTML

各クラス名は実装されるHTMLに合わせて適宜変更してください。
※ソースが長くなるので、こちらではタブが２つの場合のHTMLを記載しています。詳しくはデモページをご確認下さい。

<ul class="tab">
    <li class="active">タブ１</li>
    <li>タブ２</li>
</ul>

<div class="list">
    <div class="inner active">
        <table class="active">
            <tr><th>tab1_table1</th><td>td</td></tr>
            <tr><th>tab1_table1</th><td>td</td></tr>
            <tr><th>tab1_table1</th><td>td</td></tr>
            <tr><th>tab1_table1</th><td>td</td></tr>
            <tr><th>tab1_table1</th><td>td</td></tr>
        </table>

        <table>
            <tr><th>tab1_table2</th><td>td</td></tr>
            <tr><th>tab1_table2</th><td>td</td></tr>
            <tr><th>tab1_table2</th><td>td</td></tr>
            <tr><th>tab1_table2</th><td>td</td></tr>
            <tr><th>tab1_table2</th><td>td</td></tr>
        </table>

        <table>
            <tr><th>tab1_table3</th><td>td</td></tr>
            <tr><th>tab1_table3</th><td>td</td></tr>
            <tr><th>tab1_table3</th><td>td</td></tr>
            <tr><th>tab1_table3</th><td>td</td></tr>
            <tr><th>tab1_table3</th><td>td</td></tr>
        </table>

        <ul class="tab_sub">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div><!-- .inner end -->

    <div class="inner">
        <table class="active">
            <tr><th>tab2_table1</th><td>td</td></tr>
            <tr><th>tab2_table1</th><td>td</td></tr>
            <tr><th>tab2_table1</th><td>td</td></tr>
            <tr><th>tab2_table1</th><td>td</td></tr>
            <tr><th>tab2_table1</th><td>td</td></tr>
        </table>

        <table>
            <tr><th>tab2_table2</th><td>td</td></tr>
            <tr><th>tab2_table2</th><td>td</td></tr>
            <tr><th>tab2_table2</th><td>td</td></tr>
            <tr><th>tab2_table2</th><td>td</td></tr>
            <tr><th>tab2_table2</th><td>td</td></tr>
        </table>

        <ul class="tab_sub">
            <li class="active">1</li>
            <li>2</li>
        </ul>
    </div><!-- .inner end -->
</div><!-- .list end -->

CSS

こちらも、既存クラスなどの状況に合わせてカスタマイズしてください。
※ソースが長くなるのでこちらでは不要なスタイルを省略しています。デモページのCSSも合わせてご確認下さい。

/* タブ */
.tab{
    list-style:none;
    padding:0;
    margin:0 auto 20px auto;
    width:100%;
    display:flex;
}
.tab li{
    width:50%;
    background: #f8c6c6;
    margin-right:5px;
    border:1px solid #dfdfdf;
    text-align: center;
    padding:10px 0;
}
.tab li.active{
    background:#f79b9b;
}
/* ページャー */
.tab_sub{
    margin:20px auto;
    padding:0;
    display:flex;
    list-style:none;
}
.tab_sub li{
    padding:5px;
    border:1px solid #dfdfdf;
    margin-right:5px;
}
.tab_sub li.active{
    background:#f79b9b;
}

.list .inner,
.list .inner table{
    display:none;
}
.list .inner.active{
    display:block;
}
.list .inner table.active{
    display:table;
}

以下、各コードの簡単な解説

jQuery実行コードの部分

<script type="text/javascript">
    $(function(){
        //tabをクリックしたときの動作
        $('.tab li').click(function(){
            //クリックしたタブのindexを取得
            var index = $('.tab li').index(this);

            $('.list .inner').hide().removeClass('active');
            $('.list .inner').eq(index).fadeIn().addClass('active');

            $('.tab li').removeClass('active');
            $(this).addClass('active');
        });

        //ページャーをクリックしたときの動作
        $('.tab_sub li').click(function(){
            //クリックしたページャーのindexを取得
            var index = $('.inner.active .tab_sub li').index(this);

            $('.inner.active .tab_sub li').removeClass('active');
            $(this).addClass('active');

            //テーブル操作
            $('.inner.active table').hide().removeClass('active');
            $('.inner.active table').eq(index).fadeIn().addClass('active');
        });
    });
</script>

デモページまたは上記のHTMLソースコードを確認いただくと、まず前提としてHTMLに最初から表示させておく（アクティブにしておく）要素に、すべてactiveクラスを付与しています。

activeクラスが付与されている要素は表示状態に、それ以外はCSSで非表示dieplay：none；を指定している状態からのスタートです。

上記jQueryコードはtabをクリックしたときの動作と、各タブ内のぺージャーをクリックしたときの操作で別れています。ページャをクリックしたときの動作に関しては、.inner.activeクラスが付いている親要素の中にあるページャーのみ、動作するようになっています。

activeクラスのON / OFF を操作しているだけなので簡単に実装できると思います。

まとめ

当記事のデモのように、タブ切り替えの中にタテ長のテーブルを表示させたい場合などに、テーブルのデータ量が多くなると見辛くなってしまいます。１０件ごとに分割してページャーを実装すると見やすく画面がスッキリするので、実装を検討されている方は是非当記事をコピーで動かしてみて下さい。

コードの間違い、もっと簡潔にできるなどアドバイスなどがありましたらコメントいただければ大変嬉しいです。宜しくお願いいたします。

jQueryCDN, javascript, jQuery, コピペOK, タブ切り替え, 実装コード

Posted by シュウ