semantic-ui选项卡和javascript
semantic-ui选项卡和javascript
提问于 2014-04-21 17:57:57
使用语义ui选项卡控件，我确实在Using the tab control in semantic-ui中找到了一些答案
我从semantic-ui下载了包，打开了feed.html并修改了以下内容：
<body id="feed">
<div class="ui secondary pointing menu">
<a class="active item">
<i class="home icon"></i>Home</a>
<a class="item">
<i class="mail icon"></i>Messages</a>
<a class="item">
<i class="user icon"></i>Friends</a>
</div>
</body>但它不起作用
使用我在Using the tab control in semantic-ui中找到的内容，我更改为：
<div class="ui secondary pointing menu">
<a class="active item">
<i class="home icon"></i>Home</a>
<a class="item">
<i class="mail icon"></i>Messages</a>
<a class="item">
<i class="user icon"></i>Friends</a>
</div>http://jsfiddle.net/d93af/19/
有人能告诉我如何正确使用semantic-ui吗？
此外，有没有像bootstrap：http://getbootstrap.com/javascript这样的页面，在那里它不仅可以解释，还可以向您显示一些示例代码？
我在semantic-ui站点上找不到这样的信息。
谢谢你的帮助！
回答 3
Stack Overflow用户
发布于 2014-05-02 21:27:58
您可以使用单击(‘.on’)将类更改为活动的：
http://jsfiddle.net/d93af/22/
$(document).ready(function(){
$('.ui .item').on('click', function() {
$('.ui .item').removeClass('active');
$(this).addClass('active');
});
});Stack Overflow用户
发布于 2016-05-31 17:25:35
您需要使用jQuery启动，以下是工作示例
<div class="ui grid page">
<div class="column">
<div class="ui pointing secondary menu" id="tabsTwo">
<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 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>
</div>并使用此脚本启动
$('.menu .item').tab();Stack Overflow用户
发布于 2016-08-09 19:43:01
$(".item").click(function(){
$(".active").removeClass("active");
$(this).addClass("active");
var tab = $(this).attr("data-tab");
$(".tab.segment").removeClass("active");
$(".tab.segment[data-tab=\"" + tab + "\"]").addClass("active");
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23195009
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号