在语义界面中使用选项卡控件 [英] 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/
工作示例
这篇关于在语义界面中使用选项卡控件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文