3

I am working with Semantic UI and I am having trouble with their Tabs. The first tab is showing as the active tab, but when you click on the second tab, the tab does not change. You can see their example under "Attached" here. You can see my example below. I believe it is set up correctly. I also set up this JSFiddle with Semantic and jQuery included. Please let me know if you have any questions.

<div class="ui top attached tabular menu">
    <a class="active item">One</a>
    <a class="item">Two</a>
</div>
<div class="ui bottom attached segment">
    <h4>Product Name</h4>
    <p>Here is the description</p>
</div>
4

3 回答 3

4

您需要使用 JavaScript 来连接选项卡。

我修改了你的小提琴：

$(document).ready(function(){
    $('.tabular.menu .item').tab({history:false});
});

http://jsfiddle.net/zu4kG/5/

另请参阅此博客文章： http: //patrickgawron.com/wp/semantic-ui/

请注意，我也添加了 jquery.address.js

于 2014-07-07T21:33:23.813 回答
3

遇到了同样的问题，这个答案有助于指出正确的方向。最后我的问题是第一个选项卡从一开始就看不到，因此您需要单击至少一个选项卡。

<div class="ui bottom attached active tab segment" data-tab="first">
    <h4>Product Name</h4>
    <p>Here is the description</p>
</div>

将“活动”类添加到选项卡内容 HTML 结构中修复了此问题。

于 2014-11-08T11:05:23.503 回答
3

我希望解决的问题是我认为我错过了一些会触发语义内置操作的东西。看起来 Semantic 只是想让开发人员灵活地在这些选项卡上创建自己的操作。他们通过为您的操作提供结构和一些可能的转换来做到这一点。从本质上讲，有许多不同的解决方案可以解决此操作的功能。下面我使用 Semantic 的类和 jQuery 提供了一个非常简单的解决方案。这是JSFiddle。

$('.item').click(function(){
   $('.active').removeClass('active');
   $(this).addClass('active');
});
于 2014-07-08T13:42:50.460 回答