【Jquery】独立した2つのタブを連動して動く様にしたい

前提・実現したいこと

独立した2つのタブを連動して動く様に実装したいと考えております。

＜2つの独立したタブ↓＞

==========================
▼タブ1

｜タブ1ー1 ｜タブ1ー2』｜

「タブ1ー1」or「タブ1ー2」の内容が表示

==========================
▼タブ2

｜タブ2ー1 ｜タブ2ー2｜

「タブ2ー1」or「タブ2ー2」の内容が表示

==========================

「タブ1ー1」を押したら、「タブ2ー1 」も選択
「タブ1ー2」を押したら、「タブ2ー2 」も選択

逆の

「タブ2ー1」を押したら、「タブ1ー1 」も選択
「タブ2ー2」を押したら、「タブ1ー2 」も選択

発生している問題・エラーメッセージ

独立したタブを作成することはできたのですが、
その後のタブの連動ができなくてこちらで質問をさせていただきました。

該当のソースコード

<style>
    .tab-wrap {
        background-color: #fff;
    }

    .tab-wrap ul {
        display: flex;
        background: #eee;
    }

    .tab-btn {
        width: 50%;
        padding: 10px 0;
        text-align: center;
        list-style: none;
        cursor: pointer;
    }

    .tab-btn.show {
        background: #333;
        border-top: 2px solid #333;
        color: #fff;
    }

    .tab-contents {
        display: none;
    }

    .tab-contents.show {
        display: block;
        padding: 20px;
    }
</style>

<script>
    $(function() {
        $('.tab-btn').on('click', function() {
            var tabWrap = $(this).parents('.tab-wrap');
            var tabBtn = tabWrap.find(".tab-btn");
            var tabContents = tabWrap.find('.tab-contents');
            tabBtn.removeClass('show');
            $(this).addClass('show');
            var elmIndex = tabBtn.index(this);
            tabContents.removeClass('show');
            tabContents.eq(elmIndex).addClass('show');
        });
    });
</script>
<div class="tab-wrap">
    <ul>
        <li class="tab-btn show">タブ1-1</li>
        <li class="tab-btn">タブ2-1</li>
    </ul>
    <div class="tab-contents show">
        <p>これはタブ1ー1の中身です。</p>
    </div>
    <div class="tab-contents">
        <p>タブ2ー1の中身。</p>
    </div>
</div>

<div class="tab-wrap">
    <ul>
        <li class="tab-btn show">タブ2-1</li>
        <li class="tab-btn">タブ2-2</li>
    </ul>
    <div class="tab-contents show">
        <p>これはタブ2-1の中身です。</p>
    </div>
    <div class="tab-contents">
        <p>タブ2-2の中身。</p>
    </div>
</div>

行動規範の内容に同意します

回答1件

ベストアンサー

対応方法の一つです。
処理内容を名前付きの関数に分離して、
タブがクリックされた際は、タブのインデックスを取得し、
すべての.tab-wrapに対して関数の処理を適用させます。

js
1$(function() {
2    function onBtnClick(elm, elmIndex) {
3        //var tabWrap = $(this).parents('.tab-wrap');
4        var tabWrap = $(elm);
5        var tabBtn = tabWrap.find(".tab-btn");
6        var tabContents = tabWrap.find('.tab-contents');
7        tabBtn.removeClass('show');
8        //$(this).addClass('show');
9        tabBtn.eq(elmIndex).addClass('show');
10        //var elmIndex = tabBtn.index(this);
11        tabContents.removeClass('show');
12        tabContents.eq(elmIndex).addClass('show');
13    }
14    
15    $('.tab-btn').on('click', function() {
16        var elmIndex = $(this).index();     
17        $('.tab-wrap').each(function() {
18            onBtnClick(this, elmIndex);
19        });
20    });
21});