I followed the usage guidelines precisely as outlined on the Semantic UI page . I placed the tab.min.css file into my CSS folder and linked it correctly. However, when I view the page, it appears nothing like the Semantic UI tabs. Instead, it displays vertically with plain text like this:
Tab 1
Tab 2
Tab 3
Here is the code I am currently using on the page where the tabs should be displayed.
<script>$('.tabular.menu .item').tab();
</script>
<div class="ui tabular menu">
<div class="item active" data-tab="ts-tab1">Tab 1</div>
<div class="item" data-tab="ts-tab2">Tab 2</div>
<div class="item" data-tab="ts-tab3">Tab 3</div>
<div class="item" data-tab="ts-tab4">Tab 4</div>
<div class="item" data-tab="ts-tab5">Tab 5</div>
<div class="item" data-tab="ts-tab6">Tab 6</div>
</div>
<div class="ui tab active" data-tab="ts-tab1">
example content
</div>
<div class="ui tab" data-tab="ts-tab2">
example content
</div>
<div class="ui tab" data-tab="ts-tab3">
example content
</div>
<div class="ui tab" data-tab="ts-tab4">
example content
</div>
<div class="ui tab" data-tab="ts-tab5">
example content
</div>
<div class="ui tab" data-tab="ts-tab6">
example content
</div>
I'm at a loss here. I've been struggling with this for a day now and can't figure out what's wrong. Any help would be greatly appreciated!