Question

我正在使用基础5并复制水平标签的html代码

<ul class="tabs" data-tab>
  <li class="tab-title active"><a href="#panel2-1">Tab 1</a></li>
  <li class="tab-title"><a href="#panel2-2">Tab 2</a></li>
  <li class="tab-title"><a href="#panel2-3">Tab 3</a></li>
  <li class="tab-title"><a href="#panel2-4">Tab 4</a></li>
</ul>
<div class="tabs-content">
  <div class="content active" id="panel2-1">
    <p>First panel content goes here...</p>
  </div>
  <div class="content" id="panel2-2">
    <p>Second panel content goes here...</p>
  </div>
  <div class="content" id="panel2-3">
    <p>Third panel content goes here...</p>
  </div>
  <div class="content" id="panel2-4">
    <p>Fourth panel content goes here...</p>
  </div>
</div>

现在css没有应用于示例代码。请帮助我在哪里找到css。

感谢。

Answer 1

基础5标签已从ul切换到dl以下是想要的结构

<dl class="tabs" data-tab>
   <dd class="active"><a href="#panel2-1">Tab 1</a></dd>
  ....

link on git

文档已过时

Answer 2

您是否下载了必需品包。你应该尝试下载完整的，因为必需品没有应用css。

Answer 3

nolawi petros的回答是正确的：他们在不更新文档的情况下更改了语法。

这是完整的语法（与链接的nolavi相同，只是更短）：

<dl class="tabs" data-tab>
  <dd class="active"><a href="#panel2-1">Tab 1</a></dd>
  <dd><a href="#panel2-2">Tab 2</a></dd>
</dl>
<div class="tabs-content">
  <div class="content active" id="panel2-1">
    <p>First panel content goes here...</p>
  </div>
  <div class="content" id="panel2-2">
    <p>Second panel content goes here...</p>
  </div>
</div>

从好的方面来说，他们修复了与单个标签的深层链接，因此文档现在正确无误。如果你想使用深层链接，你应该在第一行包含“data-options =”deep_linking：true“，如下所示：

<dl class="tabs" data-tab data-options="deep_linking:true">

请注意，您必须调用foundation.tab.js才能进行深层链接工作;标签似乎开箱即用。

基础5水平标签未正确显示缺少css

3 个答案: