在语义界面中使用选项卡控件 [英] Using the tab control in semantic-ui

问题描述

我正在尝试使用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>

我做错了什么？

推荐答案

我也在调查这件事。这个标签插件似乎还没有"发布"，也没有被记录在案。请参阅https://github.com/Semantic-Org/Semantic-UI/issues/209。

这里有一篇很好的博客文章介绍了这些选项卡：http://patrickgawron.com/wp/semantic-ui/

您的主要问题是需要使用Java脚本来连接选项卡。我添加了依赖项和以下代码来调用选项卡插件：

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

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

更新：

如果将{ history: false }传递给选项卡函数，则不需要jquery.Address。

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

工作示例

http://jsfiddle.net/8ap576p3/

这篇关于在语义界面中使用选项卡控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！