首页 文章

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

提问于
浏览
1

我正在使用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中的选项卡一起使用,还是应该使用不同的东西?

4 回答

  • 2

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

    所有需要的是从 <dl> 元素中删除 data-tab 属性 .

    然后链接将通常工作 .

  • 0

    我一直在寻找类似的东西 . 如果您需要离线或链接到应用的其他页面,您可以在 dd 元素上使用onclick事件:

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

    @ BartoNaz的解决方案不再适用于Foundation 6 - 看起来Zurb无法从功能中分离演示文稿(我希望看起来像标签的东西)(我希望显示和隐藏单个页面的部分内容) .

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

  • 0

    对于Foundation 6,答案是相同的,从 ul 中删除 data-tabs 属性

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

相关问题