语义UI：表格不工作

我正在与Semantic UI一起工作，我遇到了他们的Tabs问题。第一个选项卡显示为活动选项卡，但是当您单击第二个选项卡时，该选项卡不会更改。您可以在“附件”here下看到他们的示例。你可以在下面看到我的例子。我相信它设置正确。我还设置了这个JSFiddle，其中包含了Semantic和jQuery。请让我知道，如果你有任何问题。语义UI：表格不工作

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

来源

2014-07-07 Max Baldwin

您需要使用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-07 21:33:23

这绝对是解决这个问题的方法，但是我发现这个问题有很多不同的解决方案。我想知道是否我错过了一些可以让Semantic自动采取这个动作的东西，但是看起来他们试图给你灵活地创建你自己的动作。 –

@MaxBaldwin我认为你误解了单词semantic。它并不意味着没有JavaScript，这意味着HTML不会被误用，而与它的意图相比，它包含（额外的）计算机可用的信息。 –

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

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

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

来源

2014-07-08 13:42:50

小改进:-) $（this）.siblings（'.active'）。removeClass（'active'）; –

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

<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-08 11:05:23 ddresch

这是我的最佳答案，这是他们在自己的文档中错过的信息！ –

喜欢这个答案。这解释了我的问题。谢谢。 – Sauleil

语义UI：表格不工作

回答

相关问题