在语义ui中使用tab控件

Question

我正在尝试使用语义ui构建一个网站.我喜欢我看到的很多东西.但是,我正在尝试创建一个选项卡控件.为了做到这一点,我想我抓住了概述页面上的代码.但是,正如我的jsfiddle所示,选项卡行为无法正常工作.这是我的标签代码示例:

<div class="row">
  <div class="ui active tab segment" data-tab="first">First</div>
  <div class="ui tab segment" data-tab="second">Second</div>
  <div class="ui tab segment" data-tab="third">Third</div>

  <div class="ui pointing secondary demo menu">
    <a class="active red item" data-tab="first">One</a>
    <a class="blue item" data-tab="second">Two</a>
    <a class="green item" data-tab="third">Three</a>
  </div>
</div>

我究竟做错了什么？

Answer 1

我也在调查这个.看来这个标签插件尚未"发布"或尚未记录.请参阅https://github.com/Semantic-Org/Semantic-UI/issues/209.

这里有一篇很好的博客文章,涵盖了这些标签:http://patrickgawron.com/wp/semantic-ui/

您的主要问题是您需要使用javascript连接选项卡.我添加了依赖项和此代码来调用选项卡插件:

$(document).ready(function(){
    $('.demo.menu .item').tab();
});

http://jsfiddle.net/WinstonF/d93af/1/

更新:

如果传递{ history: false }给tab功能,则不需要jquery.address.

http://jsfiddle.net/WinstonF/d93af/2/

工作实例

http://jsfiddle.net/8ap576p3/