Question

我正在使用Foundation 5.2.1，我想使用垂直标签进行导航。

<div class="small-1 column">
  <div class="languageTabs">
    <dl class="tabs vertical" data-tab>
      <dd><a href="/lang/uk">uk</a></dd>
      <dd><a href="/lang/ru">ru</a></dd>
      <dd><a href="/lang/en">en</a></dd>
    </dl>
  </div>
</div>

这里不寻常的是我没有链接到href="#section1"之类的链接，而是链接到外部URL。当我单击任何选项卡时，它会突出显示为活动状态，但不会重定向到指定的URL。

有没有办法让外部网页的链接与Foundation中的标签一起使用，还是应该使用不同的东西？

Answer 1

我找到了解决方案。奇怪的是，这在任何地方都没有记录。

所有人都需要从data-tab元素中删除<dl>属性。

然后链接将会正常工作。

Answer 2

我一直在寻找类似的事情。如果您需要在网站外链接或与应用的其他网页相关联，则可以在dd元素上使用onclick事件：

<dd onclick="location.href='http://google.com'"><a href="#">Google</a></dd>

Answer 3

@ BartoNaz的解决方案已不再适用于基金会6 - 它看起来像 Zurb无法从功能中分离演示文稿（我希望看起来像标签的东西）（我想显示和隐藏单个页面的部分）。

我不喜欢Bootstrap的冗长，但由于它更灵活，并且不妨碍RESTful网页设计，我想我将不得不回到它。

Answer 4

对于Foundation 6，答案是相同的，从data-tabs

中删除ul属性

<ul class="tabs" data-tabs id="example-tabs">

在Foundation选项卡中定期链接到URL

4 个答案: