从多个链接点击Foundation 6选项卡

时间:2016-04-19 21:16:51

标签: tabs zurb-foundation-6

有没有办法将标签从第二个链接拉到该标签?

我有两个标签,标签标题内的链接工作,但我想在标签1的标签面板区域内包含标签2的另一个链接 - 反之亦然。

1 个答案:

答案 0 :(得分:1)

你可以使用一点点javascript。将此锚点添加到选项卡1的内容以打开选项卡2.

<a href="#" onclick="$('#example-tabs').foundation('selectTab', '#panel2');">Open Tab 2</a>

以下是使用选项卡文档添加面板选择器的示例。

<div class="row">
        <div class="small-12 columns">
            <ul class="tabs" data-tabs id="example-tabs">
                <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
                <li class="tabs-title"><a href="#panel2">Tab 2</a></li>
            </ul>
        </div>

        <div class="tabs-content" data-tabs-content="example-tabs">
            <div class="tabs-panel is-active" id="panel1">
                <p><a href="#" onclick="$('#example-tabs').foundation('selectTab', '#panel2');">Open Tab 2</a></p>
                <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
            </div>
            <div class="tabs-panel" id="panel2">
                <p><a href="#" onclick="$('#example-tabs').foundation('selectTab', '#panel1');">Open Tab 1</a></p>
                <p>Suspendisse dictum feugiat nisl ut dapibus.  Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor.  Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
            </div>
        </div>
    </div>

Zurb Foundation 6 selectTab方法doc:http://foundation.zurb.com/sites/docs/tabs.html#selecttab