Question

我正在与Semantic UI合作，我遇到了Tabs的问题。第一个选项卡显示为活动选项卡，但是当您单击第二个选项卡时，选项卡不会更改。您可以在“附加”here下看到他们的示例。你可以在下面看到我的例子。我相信它设置正确。我还使用Semantic和jQuery设置了这个JSFiddle。如果您有任何问题，请与我们联系。

<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>

Answer 1

我希望解决的问题是我认为我遗漏了会触发Semantic内置动作的内容。看起来Semantic只是希望让开发人员能够灵活地在这些选项卡上创建自己的操作。他们通过为您的行为提供结构和一些可能的过渡来做到这一点。从本质上讲，这个动作如何运作有许多不同的解决方案。下面我提供了一个使用Semantic＆gt;类和jQuery的非常简单的解决方案。这是JSFiddle.

$('.item').click(function(){
   $('.active').removeClass('active');
   $(this).addClass('active');
});

Answer 2

您需要使用JavaScript来连接标签。

我修改了你的小提琴：

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

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

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

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

Answer 3

得到同样的问题，这个答案有助于指出正确的方向。我的问题是，最后第一个标签从一开始就不可见，所以你需要点击至少一个标签。

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

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

语义UI：表格不起作用

3 个答案: