Основа 6 вкладок, адресованных нескольким вкладкам - блоки контента

Question

Я хочу использовать навигацию по одной вкладке для управления двумя блоками контента с вкладками с помощью Foundation 6. В настоящий момент мои первые блоки контента с вкладками работают так, как должны работать вторые. Когда я щелкаю вторую вкладку, она добавляет содержимое второй вкладки в нижнюю часть первой во втором контейнере содержимого вкладки и не удаляет ее.

        <div class="cell  medium-6  text-padding">

            <ul class="tabs"  data-tabs id="floorplan">
                <li class="tabs-title  is-active"><a href="#ground" aria-selected="true">Ground Floor</a></li>
                <li class="tabs-title"><a href="#first">First floor</a></li>
            </ul>
            <div class="tabs-content"  data-tabs-content="floorplan">
                <div class="tabs-panel  is-active" id="ground">
                   <p>Tab 1</p>
                </div>
                <div class="tabs-panel" id="first">
                    <p>Tab 2</p>
                </div>

            </div>
        </div>

        <div class="cell  medium-6">
            <div class="tabs-content" data-tabs-content="floorplan">
                <div class="tabs-panel  is-active" id="ground">
                   <p>Tab 1</p>
                </div>
                <div class="tabs-panel" id="first">
                    <p>Tab 2</p> 
                </div>
            </div>
        </div>

    </div>
</section>

Answer 1

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

Если вам нужно управлять вкладками из одного набора кнопок, то вы можете переключитьсяатрибуты данных и использовать пользовательские методы для запуска изменения вкладки.https://foundation.zurb.com/sites/docs/tabs.html#js-functions