Lightning Design System Tabs not working

Question

I tried doing this but the tabs dont work. When I click to Item Two, it doesn't navigate. What am i missing?

<div class="slds-tabs--scoped">
      <ul class="slds-tabs--scoped__nav" role="tablist">
        <li class="slds-tabs__item slds-text-heading--label slds-active" title="Item One" role="presentation"><a href="#" role="tab" tabindex="0" aria-selected="true">Item One</a></li>
        <li class="slds-tabs__item slds-text-heading--label" title="Item Two" role="presentation"><a href="#" role="tab" tabindex="-1" aria-selected="false">Item Two</a></li>
        <li class="slds-tabs__item slds-text-heading--label" title="Item Three" role="presentation"><a href="#" role="tab" tabindex="-1" aria-selected="false">Item Three</a></li>
      </ul>
      <div class="slds-tabs__content slds-show" role="tabpanel">
        <h2>Item One Content</h2>
      </div>
      <div class="slds-tabs__content slds-hide" role="tabpanel">
        <h2>Item Two Content</h2>
      </div>
      <div class="slds-tabs__content slds-hide" role="tabpanel">
        <h2>Item Three Content</h2>
      </div>
    </div>

Answer 1

SLDS is purely CSS-driven and therefore has no JS tied to it out of the box. Luckily, there is Appiphony Lightning JS (http://aljs.appiphony.com). It's a set of jQuery plugins and Ember.js components you can use to get those tabs working. It also has other useful components, such as Datepickers, Modals, and Tooltips.

Answer 2

I was facing the same issue, and was able to do navigation through the following jquery code:

    $('.slds-tabs__item').on('click', function(){
        $(this).addClass('slds-active');
        $(this).find('a').attr('aria-selected', true);
        var $contentToShow = $('#'+$(this).find('a').attr('aria-controls'));
        $contentToShow.removeClass('slds-hide');
        $contentToShow.addClass('slds-show');

        $(this).siblings().removeClass('slds-active');
        $(this).siblings().find('a').attr('aria-selected', false);
        $contentToShow.siblings('.slds-tabs__content').removeClass('slds-show');
        $contentToShow.siblings('.slds-tabs__content').addClass('slds-hide');
    });

In your code, you need to add a way to know which content will be shown when the tab is clicked. For the code above, it uses the data in "aria-controls", and looks for the element with the same id. This element(content) will be the one shown.

Answer 3

The lightning design system does not come with a JS toolkit for you like Bootstrap framework .Since JS implementation can be done in various frameworks its upto you to add some amount jquery to make it work.

If you are familiar with angular you may build your own directives for this .

The simplest way to do this will be use jquery to change CSS from hide to show .

If you are using lightning components you can use JS components to modify the CSS of DOM

$A.util.toggleClass(element, "slds-tabs__content slds-show");//Note element can be found using find function for with your aura Id

Answer 4

The SLDS has changed slightly since riezel's answer; you now need to specify the type of tab in the class selectors (see https://www.lightningdesignsystem.com/components/tabs)

Updated Code:

$('.slds-tabs--default__item').on('click', function(){
    $(this).addClass('slds-active');
    $(this).find('a').attr('aria-selected', true);
    var $contentToShow = $('#'+$(this).find('a').attr('aria-controls'));
    $contentToShow.removeClass('slds-hide');
    $contentToShow.addClass('slds-show');

    $(this).siblings().removeClass('slds-active');
    $(this).siblings().find('a').attr('aria-selected', false);
    $contentToShow.siblings('.slds-tabs--default__content').removeClass('slds-show');
    $contentToShow.siblings('.slds-tabs--default__content').addClass('slds-hide');
});

Answer 5

I tested the your exact same code in a new lightning component in my dev org and it does display the tabs (see the screenshot below)

the only extra step i did is to add the lightning design system static resource.

Go To Setup -> Develop -> Static Resources

and import the zip file lightning design system static resource zip file download it from here

TIP : if you open your S1 app in your browser using one/one.app and keep the dev tools open you can easily spot that the css file is missing which shows you have not added the static resource.

before adding the static resource, it was not working for me either. it was displayed as