CODEWITHSUNDEEP
jqueryhtmlsemantic-ui
Max Baldwin
Max Baldwin

Reputation: 3472

Semantic UI : Tabular Not Working

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>

Upvotes: 3

Views: 7962

Answers (3)

ddresch
ddresch

Reputation: 138

Got the same issue and this answer helped to point the right direction. My problem was at the end that the first tab was not visible right from the beginning, so you needed to click at least one tab.

<div class="ui bottom attached active tab segment" data-tab="first">
    <h4>Product Name</h4>
    <p>Here is the description</p>
</div>

Adding the "active" class to the tab content HTML structure fixed this.

Upvotes: 3

Max Baldwin
Max Baldwin

Reputation: 3472

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');
});

Upvotes: 3

Kirill Chatrov
Kirill Chatrov

Reputation: 832

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

Upvotes: 4

Related Questions