Lightning component with SLDS

Question

I try to build a lightning component with SLDS, lightning design system. The component I want is the tabs.

So I use the code given by lightning design system, but since it is static i need to use some logic in javascript. Here is my code :

the component :

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes" access="global">
<ltng:require scripts="/resource/jqueryMin"
              styles="/resource/SLDS103/assets/styles/salesforce-lightning-design-system-ltng.css"
              afterScriptsLoaded="{!c.doInit}"/>

<div class="slds">
    <div class="slds-tabs--default">
        <ul class="slds-tabs--default__nav" role="tablist">
            <li class="slds-tabs--default__item slds-text-heading--label slds-active" title="Item One" role="presentation">
                <a class="slds-tabs--default__link" href="#void" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-default-1" id="tab-default-1__item" onclick="{!c.changerTab}">
                    Item One</a>
            </li>
            <li class="slds-tabs--default__item slds-text-heading--label" title="Item Two" role="presentation">
                <a class="slds-tabs--default__link" href="#void" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-2" id="tab-default-2__item" onclick="{!c.changerTab}">
                    Item Two</a>
            </li>
            <li class="slds-tabs--default__item slds-text-heading--label" title="Item Three" role="presentation">
                <a class="slds-tabs--default__link" href="#void" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-3" id="tab-default-3__item" onclick="{!c.changerTab}">
                    Item Three</a>
            </li>
        </ul>
        <div id="tab-default-1" class="slds-tabs--default__content slds-show" role="tabpanel" aria-labelledby="tab-default-1__item">Item One Content</div>
        <div id="tab-default-2" class="slds-tabs--default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-2__item">Item Two Content</div>
        <div id="tab-default-3" class="slds-tabs--default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-3__item">Item Three Content</div>
    </div>
</div>

</aura:component>

the controller :

({
doInit : function(component, event, helper) {
    var url = "/";
    if(window.location.href.search("/s/") !== -1){
        var taburl = window.location.href.split("/");
        if(taburl.length >3){
            url += taburl[3] + "/";
        }
    }
    var useElements = document.getElementsByTagName("use");
    for(var ii=0;ii<useElements.length;ii++){
        useElements[ii].setAttribute("xlink:href",url +useElements[ii].getAttribute("xlink:href"));
    }
},

changerTab : function(elmnt) {
    // slds-active
    $(elmnt).parent("li").siblings(".slds-active").removeClass("slds-active");
    $(elmnt).parent("li").addClass("slds-active");

    // tabindex
    $(elmnt).parent("li").siblings().children("a").attr("tabindex", -1);
    $(elmnt).attr("tabindex", 0);

    // aria-selected
    $(elmnt).parent("li").siblings().children("a").attr("aria-selected", false);
    $(elmnt).attr("aria-selected", true);

    // hiding previouly selected tab (slds-show/slds-hide)
    $(elmnt).closest(".slds-tabs--default").children("div[role='tabpanel'].slds-show").addClass("slds-hide");
    $(elmnt).closest(".slds-tabs--default").children("div[role='tabpanel'].slds-show").removeClass("slds-show");
    // displaying newly selected tab (slds-show/slds-hide)
    $(elmnt).closest(".slds-tabs--default").children("div[aria-labelledby='"+elmnt.id+"']").addClass("slds-show");
    $(elmnt).closest(".slds-tabs--default").children("div[aria-labelledby='"+elmnt.id+"']").removeClass("slds-hide");
}
})

then I put my component in an app so I can see it. The tabs are displaying, and the first tab is selected. But when I click on another tab it do not change... I don't know how to get my javascript function changerTab to work.

I used this tutorial for doing that, but it is for a visualforce page. I tried it and it works, but my big problem is to transform the javascript for the lightning component.

Thank you !

Answer 1

Any action you define in your component is going to pass (component, event, helper) to the controller action. In your case, the <a> elements that you've linked to the changerTab method are going to do the exact same thing. Your elmnt argument is going to contain a reference to the component that you pasted in here, not to the tab you want to switch to.

One easy fix would be to make 3 different controller actions, one for each <a> element. Have each of those 3 controller actions call a helper method that passes in the aura:id of the tab you want to show, and utilize component.find() to locate and hide/show the appropriate tabs.

Answer 2

better to use component.find() and $A.util.addClass()/$A.util.removeClass() for the style changes. https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cb_styles.htm