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/