Question

我在Foundation版本5.2.2上有一组垂直选项卡。代码看起来像这样：

<div id="projects" data-dropdown-content class="f-dropdown content">
  <h6>Gestión de proyectos</h6>
  <dl class="tabs vertical projects-tabs" data-tab data-options="is_hover:true">
    <dd class="active"><a href="#panel1a">Tab 1</a></dd>
    <dd><a href="#panel2a">Tab 2</a></dd>
    <dd><a href="#panel3a">Tab 3</a></dd>
    <dd><a href="#panel4a">Tab 4</a></dd>
  </dl>
  <div class="tabs-content vertical">
    <div class="content active" id="panel1a">
      <ul class="projects-tabs-links">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
      </ul>
    </div>
    <div class="content" id="panel2a">
      <ul class="projects-tabs-links">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </div>
    <div class="content" id="panel3a">
      <ul class="projects-tabs-links">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
      </ul>
    </div>
    <div class="content" id="panel4a">
      <ul class="projects-tabs-links">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
      </ul>
    </div>
  </div>
</div>

这个想法是在悬停选项卡时显示每个选项卡的内容，但是当我在它们上设置data-options =“is_hover：true”时，它就不起作用了。我检查了foundation.tab.js，看看是否一切正常，一切似乎都没问题。正如您在this link中所看到的，最近添加了对标签的is_hover支持。

你知道为什么这不起作用吗？先谢谢！

Answer 1

一旦我从外部div中删除了类f-dropdown，我就能够让你的例子工作。您可以在此处查看我的工作示例http://cdpn.io/zgtkG。

如果您不熟悉CodePen，则底部会显示一个名为编辑此笔的链接/按钮。进入编辑器后，您可以单击JS和CSS旁边的齿轮图标，查看我对Foundation 5.2.2的引用。

我希望有帮助， - 亚当

数据的选项=＆＃34; is_hover：真＆＃34;没有在Foundation 5.2.2上工作

1 个答案: