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?

Deraign

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/

Scarlet

Upvote for { history: false }, that's what i was missing. – Nich

This method doesnt seem to be working anymore. All the solutions include jQuery Adress.js but it still doesnt solve the porlbem. It works on their documentation page though. I dont know how semantic-ui.com/modules/tab.html – Shirlshirlee

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.

Brigandine

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

Dower