在semantic-ui中使用選項卡控件

我正在嘗試使用semantic-ui來構建網站。我喜歡我所看到的很多東西。但是，我試圖創建一個選項卡控件。爲了做到這一點，我想我抓住了概覽頁面上找到的代碼。但是，由於我的jsfiddle shows，選項卡行爲無法正常工作。以下是我的標籤代碼示例：在semantic-ui中使用選項卡控件

<div class="row"> 
    <div class="ui active tab segment" data-tab="first">First</div> 
    <div class="ui tab segment" data-tab="second">Second</div> 
    <div class="ui tab segment" data-tab="third">Third</div> 

    <div class="ui pointing secondary demo menu"> 
    <a class="active red item" data-tab="first">One</a> 
    <a class="blue item" data-tab="second">Two</a> 
    <a class="green item" data-tab="third">Three</a> 
    </div> 
</div>

我在做什麼錯？

來源

2014-02-14 user3284007

我也在研究這個。看起來標籤插件尚未「發佈」或尚未記錄。請參閱https://github.com/Semantic-Org/Semantic-UI/issues/209。

有覆蓋的標籤有好的博客文章：http://patrickgawron.com/wp/semantic-ui/

你的主要問題是，你需要使用JavaScript來的電纜鋪設標籤。我加的依賴關係和該代碼來調用標籤插件：

$(document).ready(function(){ 
    $('.demo.menu .item').tab(); 
});

http://jsfiddle.net/WinstonF/d93af/1/

更新：

如果傳遞{ history: false }的選項卡的功能，那麼你並不需要jQuery的。地址。

http://jsfiddle.net/WinstonF/d93af/2/

工作實例

http://jsfiddle.net/8ap576p3/

來源

2014-02-16 16:37:04

Upvote for'{history：false}'，這就是我所缺少的。 –

這種方法似乎沒有工作了。所有的解決方案都包含jQuery Adress.js，但它仍然不能解決porlbem問題。它雖然在他們的文檔頁面上工作。我不知道http://semantic-ui.com/modules/tab.html –

我想我只是把一個選項的人仍然有問題：

我有4項基本的網站菜單。下面是HTML的例子：

<div class="ui pointing menu"> 
    <div class="ui container"> 
     <a href="/route1" class="header item"> 
      TEXT 
     </a> 
     <a href="/route2" class="item">TEXT</a> 
     <a href="/route3" class="item">TEXT</a> 
     <a href="/route4" class="item">TEXT</a> 
    </div> 
</div>

下面這個在HTML的身體我已經通過，並檢查該用戶是在什麼路線去，然後一個腳本進行，使在活動的菜單選項卡一。該解決方案不依賴於用戶點擊非常方便的菜單項。

<script> 
    // get the current path the user is on and extract the route name 
    var path = window.location.pathname.split("/").pop(); 

    // loop through each item 
    $('.pointing.menu .item').each(function(i, obj){ 

     // extract the href (route) for the current item 
     var href = obj.href.split("/").pop(); 

     // if the href and the path are the same, make that 
     // item the active tab 
     if (href === path){ 
      $(this).addClass("active"); 
     } 
    }); 
</script>

我試圖玩弄一些我已經在互聯網上找到其他的答案，無法得到其中的任何工作。

希望這會有所幫助。

來源

2017-02-24 09:21:52

在semantic-ui中使用選項卡控件

回答

相關問題