使用semantic-ui tab控件,我确实在semantic-ui中使用tab控件找到了一些答案
我从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>
它不起作用
使用我在semantic-ui中使用tab控件中找到的内容,我改为:
<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>
有人能指出我如何正确使用语义ui？
还有,像bootstrap这样的页面:http: //getbootstrap.com/javascript 它不仅解释了,而且还展示了一些示例代码？
我在semantic-ui网站上找不到这样的信息.
谢谢您的帮助!
小智 7
您可以使用.on('click')来更改活动类:
$(document).ready(function(){
$('.ui .item').on('click', function() {
$('.ui .item').removeClass('active');
$(this).addClass('active');
});
});
您需要使用 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();