Semantic UI：选项卡无法工作。

Question

我正在使用Semantic UI，并且在处理Tabs时遇到了问题。第一个标签显示为活动标签，但是当您单击第二个标签时，标签不会更改。您可以在“附加”此处下查看他们的示例。您可以在下面看到我的示例。我认为它设置正确。我还使用了包括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>

- Max Baldwin

Answer 1

你需要使用JavaScript来连接这些选项卡。

我已经修改了你的示例代码：

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

这里有相关的内容。另外，您还可以参考这篇博客文章。请注意，我也已经添加了jquery.address.js。

- Kirill Chatrov

---

这绝对是解决这个问题的一个方案，但我发现有许多不同的解决方案。我想知道是否有什么东西可以使 Semantic 自动采取这个操作，但看起来他们试图给你灵活性来创建自己的操作。 - Max Baldwin

@MaxBaldwin 我认为你误解了"语义"这个词。它并不意味着没有JavaScript，而是指HTML没有被滥用，与其原本的用途相比，它包含了(额外的)可供计算机使用的信息。 - Ruan Mendes

@JuanMendes 是的，我明白你的意思。有一些 JavaScript 函数包含在 semantic.js 文件中。我不知道是否缺少了该文件中可能包含的选择器。 - Max Baldwin

Answer 2

我希望解决的问题是，我认为我缺少了某些东西来触发Semantic内置的操作。看起来，Semantic只是想给开发者灵活性，让他们在这些选项卡上创建自己的操作。它通过提供结构和一些可能的转换来实现这一点。基本上，有许多不同的解决方案可以使该操作功能正常。下面我提供了一个非常简单的解决方案，使用了Semantic的类和jQuery。这里是JSFiddle链接。

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

- Max Baldwin

---

一个小的改进 :-)$(this).siblings('.active').removeClass('active'); - Marius Engen Haugen

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结构中即可解决此问题。

- ddresch

---

这对我来说是最好的答案，这是他们自己文档中遗漏的信息！！ - user4597527

喜欢这个答案。它解释了我遇到的问题。谢谢。 - Sauleil

在我们的情况下，在可见性条件得到解决之前，选项卡会使用 .tab() 来激活。 - J. Unkrass