Question

我使用Foundation的JavaScript框架来创建基于标签的内容容器，当用户点击标签页时，该容器会更改面板内容。（这仅仅是Zurb＆＃39; s documentation中描述的标准制表符行为。）

我有三个面板，其中一个应该是页面加载时默认的一个面板。此面板被相应的<li>标记标记为默认值，该标记的属性为＆＃34;有效＆＃34;：

<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正在应用于＆＃34; active＆＃34; class，因为正在正确渲染背景和悬停颜色。

我尝试使用＆＃34; $（document）.foundation（）; ＆＃34;来尝试使用JavaScript重新触发标签内容。和＆＃34; $（文件）。基础（＆＃39;标签＆＃39;，＆＃39; reflow＆＃39;）; ＆＃34;如文档中所述，但是没有用。

Answer 1

解决方案是添加＆＃34; active＆＃34;类别到面板内容的标记---不仅仅是标签：

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

此HTML正确显示页面加载时＃panel1的内容。

活动选项卡不显示基础5中的页面加载内容

1 个答案: