semantic-ui - 在语义UI中使用选项卡控件

Question

我正在尝试使用semantic-ui建立一个网站。我很喜欢我所看到的。但是，我试图只创建一个选项卡控件。为了做到这一点，我想我捕获了概述页面上的代码。但是，作为我的jsfiddle shows，选项卡行为无法正常工作。这是我的标签代码的示例:

<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来连接选项卡。我添加了依赖关系和以下代码来调用tab插件:

$(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/