Tab navigation SemanticUI

tab-navigation-semanticUi.html

$(document).ready(function() {
  //$('.item').tab();
  
  $('.item')
  .on('click', function() {
    
    if( !$(this).hasClass('disabled') ){
      $.tab('change tab', $(this).data("tab") );
    }
  });
  
});


<div class="container" style="max-width: 80%; margin: 2em auto;">
    <div class="ui four item stackable tabs menu">
        <a class="item" data-tab="first">First</a>
        <a class="item disabled" data-tab="second">Second</a>
        <a class="item" data-tab="third">Third</a>
        <a class="item" data-tab="fourth">Fourth</a>
    </div>

    <div class="ui tab" data-tab="first">
        First tab.
    </div>

    <div class="ui tab" data-tab="second">
        Secondd tab.
    </div>

    <div class="ui tab" data-tab="third">
        Third tab.
    </div>

    <div class="ui tab" data-tab="fourth">
        Fourth tab.
    </div>
</div>