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

Foundation 6选项卡可解决多个选项卡内容块

1 个答案: