Using a tab control in semantics

Question

I am trying to create a website using semantic-ui . I like what I see. However, I am trying to 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 , tab behavior is not working properly. Here is the sample code for my tab:

<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 also studied this. The tab plugin does not seem to be “released” yet or has not yet been documented. See 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/

Update:

{ history: false } , jquery.address.

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

http://jsfiddle.net/8ap576p3/

Answer 2

, , :

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

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

, , .

, .