Как изменить содержимое контейнера двух вкладок с помощью одной вкладки с помощью начальной загрузки 4.x?

Question

Я пытаюсь создать две вкладки-контейнеры, одна из которых используется для описания содержимого набора файлов, а вторая - как список ссылок для загрузки для описанных файлов.

Теперь я попытался управлять двумя контейнерами, используя только одну вкладку, и увидел решение, используемое data-target с двумя идентификаторами, например

data-target="#TabA1, #TabB1"

Но, похоже, эта опция не работает с bootstrap 4.x, поэтому есть какое-то решение или обходной путь для решения этой проблемы.

В любом случае, вот мой код, если кто-то может помочь мне в этом.

  <div class="row">
    <div class="col-sm-8">
        <div class="card text-center ">
            <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs">
                    <li class="nav-item">
                        <a class="nav-link active" href="#TabA1" data-target="#A1, #B1" data-toggle="tab" role="tab" aria-selected="true">A1/B1</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#TabA2" data-target="#A2, #B2" data-toggle="tab" role="tab" aria-selected="false">A2/B2</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#TabA3" data-target="#A3, #B3" data-toggle="tab" role="tab" aria-selected="false">A3/B3</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#TabA4" data-target="#A4, #B4" data-toggle="tab" role="tab" aria-selected="false">A4/B4</a>
                    </li>
                </ul>
            </div>
            <div class="card-body" style="text-align: left; overflow-y: scroll; max-height: 600px;">
                <div class="tab-content" id="myTabContent_A">
                    <div class="tab-pane fade show active" id="TabA1" role="tabpanel">
                        A1
                    </div>
                    <div class="tab-pane fade" id="TabA2" role="tabpanel">
                        A2
                    </div>
                    <div class="tab-pane fade" id="TabA3" role="tabpanel">
                        A3
                    </div>
                    <div class="tab-pane fade" id="TabA4" role="tabpanel">
                        A4
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="card">
            <h5 class="card-header">Files</h5>
            <div class="card-body">
                <h5 class="card-title"></h5>

                <div class="tab-content" id="myTabContent_B">
                    <div class="tab-pane fade show active" id="TabB1" role="tabpanel">
                        B1
                    </div>
                    <div class="tab-pane fade" id="TabB2" role="tabpanel">
                        B2
                    </div>
                    <div class="tab-pane fade" id="TabB3" role="tabpanel">
                        B3
                    </div>
                    <div class="tab-pane fade" id="TabB4" role="tabpanel">
                        B4
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>  

Только с указанным HTML-кодом я вижу изменения, произошедшие с первым контейнером вкладок. Но я ожидал увидеть изменения в обоих контейнерах А и В.

Answer 1

К сожалению, в bootstrap 4.X это было удалено, и возникла проблема с github, чтобы обсудить это, это должна была быть идея для 4.1, но идея была удалена в 4.2, поэтому это невозможно сделать в встроенный загрузчик и вам нужно использовать JS.

https://github.com/twbs/bootstrap/issues/19964