Foundation 6标签，用于处理多个标签内容块

Question

我想使用一个选项卡导航来控制使用基础6的2个选项卡内容块。目前我的第一个选项卡内容块工作，而第二个选项卡内容块不工作。当我单击第二个选项卡时，它会将第二个选项卡的内容添加到第二个选项卡内容容器中第一个选项卡的底部，并且不会将其删除。

        <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

选项卡内容使用id，因此您无法使用具有相同ID的两组选项卡内容。

如果必须从一组按钮控制选项卡，则可以切换到数据属性并使用自定义方法触发选项卡更改。 https://foundation.zurb.com/sites/docs/tabs.html#js-functions