Using the tab control in semantic-ui

Question

I am trying to build a website using semantic-ui. I like a lot of what I see. However, I'm trying to just create a tab control. In an attempt to do this, I thought I grabbed the code found on the overview page. However, as my jsfiddle shows, the tab behavior is not working properly. Here's a sample of my tab code:

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

What am I doing wrong?

Answer 1

I was also looking into this. It seems the tab plugin is not yet "released" or documented yet. See https://github.com/Semantic-Org/Semantic-UI/issues/209.

There's a good blog article covering the tabs here: http://patrickgawron.com/wp/semantic-ui/

Your main problem was that you need to use javascript to wire up the tabs. I added the dependencies and this code to invoke the tab plugin:

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

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

Update:

If you pass { history: false } to the tab function, then you don't need jquery.address.

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

Working example

http://jsfiddle.net/8ap576p3/

Answer 2

I thought I would just throw in an option for anyone still having issues:

I have a basic website with 4 items in the menu. Here is an example of the 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>

Below this in the body of the HTML I have a script that goes through and checks what route the user is on and then proceeds to make that tab in the menu the active one. This solution doesn't rely on the user clicking on the menu item which is pretty handy.

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

I tried playing around with some of the other answers I have found on the internet and couldn't get any of them working.

Hope this helps.

Answer 3

For what it's worth, it was not working for me, even using their example code. It turns out there is some issue with the minified file, so if you update

<script src="semantic/dist/semantic.js"></script> 

to no longer user

semantic.min.js

but instead, just semantic.js it seems to work.

Not ideal - but will get tabs working