Question

基金会3的示例解释了如何使用列表设置标签，但如何使用带有div布局的标签？

<dl class="tabs">
  <dd class="active"><a href="#simple1">Simple Tab 1</a></dd>
  <dd><a href="#simple2">Simple Tab 2</a></dd>
  <dd class="hide-for-small"><a href="#simple3">Simple Tab 3</a></dd>
</dl>
<ul class="tabs-content">
  <li class="active" id="simple1Tab">This is simple tab 1s content. Pretty neat, huh?</li>
  <li id="simple2Tab">This is simple tab 2s content. Now you see it!</li>
  <li id="simple3Tab">This is simple tab 3s content.</li>
</ul>

<div class="tabs-content">
  <div class="active" id="simple1Tab">This is simple tab 1s content. Pretty neat, huh?</li>
  <div id="simple2Tab">This is simple tab 2s content. Now you see it!</div>
  <div id="simple3Tab">This is simple tab 3s content.</div>
</div>

Answer 1

在列表项中添加div。

<ul class="tabs-content">
  <li class="active" id="simple1Tab">
    <div>This is simple tab 1s content. Pretty neat, huh?</div>
  </li>
  <li id="simple2Tab">
    <div>This is simple tab 2s content.</div>
  </li>
  <li id="simple3Tab">
    <div>This is simple tab 3s content.</div>
  </li>
</ul>

带有Div布局的Zurb-Foundation选项卡

1 个答案: