Active选项卡没有在Foundation 5中的页面加载中显示内容

Question

我正在使用基金会的JavaScript框架创建一个基于选项卡的内容容器，当用户单击选项卡时，该容器将更改面板内容。(这只是Zurb的文档中描述的标准选项卡行为。)

我有三个面板，其中一个应该是默认的页面加载激活面板。该面板被相应的具有属性“active”的<li>标记标记为默认：

<ul class="tabs vertical" data-tab data-options="deep-linking:true">
    <li class="tab-title active"><a href="#panel1">Listings & Downloads</a></li>
    <li class="tab-title"><a href="#panel2">Competitions</a></li>
    <li class="tab-title"><a href="#panel3">Commentary</a></li>
</ul>
<div class="tabs-content">
    <div id="panel1" class="content">
        (This content is supposed to be displayed automatically on page load, but it doesn't appear until the user clicks on the tab for panel1.)
    </div>
    <div id="panel2" class="content">
        Lorem ipsum dolor sit amet.
    </div>
    <div id="panel3" class="content">
        Lorem ipsum dolor sit amet.
    </div>
</div>

我知道正确的CSS被应用到“活动”类中，因为背景和悬停颜色正在适当地呈现。

我试图通过使用"$(document).foundation();“和"$(document).foundation('tab'，‘reflow’；来重新触发JavaScript的选项卡内容，如文档中所述，但这是行不通的。

Answer 1

解决方案是将“活动”类添加到面板内容的标记中--而不仅仅是添加到选项卡中：

<div class="tabs-content">
    <div id="panel1" class="content active">
    [....]
</div>

此HTML在页面加载时正确地显示#panel1 1的内容。