Programmer 400 Programmer 400 - 5 months ago 29
CSS Question

Why won't my tabs work?

I'm trying the tab example from semantic ui but I can't make it work. the tabs don't change. did I forget to include something?



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

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.js"></script>
<div class="ui top attached tabular menu">
<a class="item active" data-tab="first">First</a>
<a class="item" data-tab="second">Second</a>
<a class="item" data-tab="third">Third</a>
</div>
<div class="ui bottom attached tab segment active" data-tab="first">
First
</div>
<div class="ui bottom attached tab segment" data-tab="second">
Second
</div>
<div class="ui bottom attached tab segment" data-tab="third">
Third
</div>




Answer

I beleive you need to call this

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

to make your tabs works.

And semantic-ui have great documentation you should look there.