Semantic UI : Tabular Not Working

Question

I am working with Semantic UI and I am having trouble with their Tabs. The first tab is showing as the active tab, but when you click on the second tab, the tab does not change. You can see their example under "Attached" here. You can see my example below. I believe it is set up correctly. I also set up this JSFiddle with Semantic and jQuery included. Please let me know if you have any questions.

<div class="ui top attached tabular menu">
    <a class="active item">One</a>
    <a class="item">Two</a>
</div>
<div class="ui bottom attached segment">
    <h4>Product Name</h4>
    <p>Here is the description</p>
</div>

Answer 1

You need to use JavaScript to wire the tabs.

I've modified your fiddle:

$(document).ready(function(){
    $('.tabular.menu .item').tab({history:false});
});

http://jsfiddle.net/zu4kG/5/

Also refer to this blog post: http://patrickgawron.com/wp/semantic-ui/

Please note that I've added jquery.address.js as well

Answer 2

The issue that I was hoping to solve was that I thought that I was missing something that would trigger an action built into Semantic. It looks like Semantic just wants to give the developer the flexibility to create their own actions on these tabs. They do that by providing the structure and some possible transitions for your actions. Essentially, there are many different solutions to how this action can function. Below I have provided a very simple solution using Semantic's classes and jQuery. Here is the JSFiddle.

$('.item').click(function(){
   $('.active').removeClass('active');
   $(this).addClass('active');
});