語義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：表格不工作

回答

相關問題