+ Start a Discussion
AmulAmul 

Tab Pannel active Inactive how?

<aura:application >
    <ltng:require styles="/resource/SLDS100/assets/styles/salesforce-lightning-design-system-ltng.css" />
    <ltng:require styles="/resource/SLDS100/assets/styles/salesforce-lightning-design-system-scoped.css" />
    <ltng:require styles="/resource/SLDS100/assets/styles/salesforce-lightning-design-system.css" />
    <ltng:require scripts="/resource/jquery214"  afterScriptsLoaded="{!c.afterScriptsLoaded}"/>
    
    <div class="slds-tabs--scoped">
  <ul class="slds-tabs--scoped__nav" role="tablist">
    <li class="slds-tabs--scoped__item slds-text-heading--label slds-active" title="ALL Accounts" role="presentation"><a class="slds-tabs--scoped__link" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-scoped-1" id="tab-scoped-1__item" onclick="selectTab(this);">All Accounts</a></li>
    <li class="slds-tabs--scoped__item slds-text-heading--label" title="ALL Contacts"
      role="presentation"><a class="slds-tabs--scoped__link" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-scoped-2" id="tab-scoped-2__item" onclick="{!c.selectTab}" data="{tab-scoped-3__item}">All Contacts</a></li>
    <li class="slds-tabs--scoped__item slds-text-heading--label" title="Item Three"
      role="presentation"><a class="slds-tabs--scoped__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-scoped-3" id="tab-scoped-3__item" onclick="{!c.selectTab}" data="{tab-scoped-3__item}">Item Three</a></li>
  </ul>
        <div id="tab-scoped-1" class="slds-tabs--scoped__content slds-show" role="tabpanel" aria-labelledby="tab-scoped-1__item">
            ALL CONTACTS<c:ContactList />
        </div>
        <div id="tab-scoped-2" class="slds-tabs--scoped__content slds-hide" role="tabpanel" aria-labelledby="tab-scoped-2__item">
            ALL ACCOUNTS<c:AccountsList />
        </div>
        <div id="tab-scoped-3" class="slds-tabs--scoped__content slds-hide" role="tabpanel" aria-labelledby="tab-scoped-3__item">
            Item Three Content
        </div>
    </div>
</aura:application>

what i have to write for enabling Tab ? Please share javascript if possible.
Best Answer chosen by Amul

All Answers

Balasubramaniam 07Balasubramaniam 07
This was selected as the best answer
AmulAmul
thanks got it

Final Code
Component
<aura:application >
    <ltng:require styles="/resource/SLDS202/assets/styles/salesforce-lightning-design-system.min.css" />
    <ltng:require scripts="/resource/jquery214"></ltng:require>
    
   <div class="slds-tabs--scoped">
  <ul class="slds-tabs--scoped__nav" role="tablist">
    <li class="slds-tabs--scoped__item slds-text-heading--label slds-active" title="ACCOUNTS" 
	role="presentation">
        <a class="slds-tabs--scoped__link" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="true" 
	aria-controls="tab-scoped-1" id="tab-scoped-1__item" onclick="{!c.selectTab}">
         ACCOUNTS</a></li>
    <li class="slds-tabs--scoped__item slds-text-heading--label" title="CONTACTS" role="presentation">
     <a class="slds-tabs--scoped__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" 
        aria-controls="tab-scoped-2" id="tab-scoped-2__item" onclick="{!c.selectTab}">
         CONTACTS</a></li>
    <li class="slds-tabs--scoped__item slds-text-heading--label" title="ITEM THREE"  role="presentation">
        <a class="slds-tabs--scoped__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" 
           aria-controls="tab-scoped-3" id="tab-scoped-3__item" onclick="{!c.selectTab}">
            ITEM THREE</a></li>
  </ul>
  <div id="tab-scoped-1" class="slds-tabs--scoped__content slds-show" role="tabpanel" aria-labelledby="tab-scoped-1__item"><c:AccountsList /></div>
  <div id="tab-scoped-2" class="slds-tabs--scoped__content slds-hide" role="tabpanel" aria-labelledby="tab-scoped-2__item"><c:ContactList /></div>
  <div id="tab-scoped-3" class="slds-tabs--scoped__content slds-hide" role="tabpanel" aria-labelledby="tab-scoped-3__item">Item Three Content</div>
</div>
</aura:application>

Controller.js
 
({
     selectTab: function(component, event, helper) {
         var tabindex = event.target.getAttribute("tabindex");
         tabindex = parseInt(tabindex);
         var obj=event.target;
         alert(tabindex);
         alert(obj.id);
         $("div").removeAttr('class');
         $("li").removeAttr('class')
         if(obj.id=='tab-scoped-1__item'){
             $(obj).attr("tabindex", 0);
             $(obj).parent("li").attr('class','slds-tabs--scoped__item slds-text-heading--label slds-active');
             //for div class
             $("#tab-scoped-1").attr('class', 'slds-tabs--scoped__content slds-show');
             $("#tab-scoped-2").attr('class', 'slds-tabs--scoped__content slds-hide');
             $("#tab-scoped-3").attr('class', 'slds-tabs--scoped__content slds-hide');
         }
         if(obj.id=='tab-scoped-2__item'){
             $(obj).attr("tabindex", 0);
             $(obj).attr("tabindex", 0);
             $(obj).parent("li").attr('class','slds-tabs--scoped__item slds-text-heading--label slds-active');
             //for div class
             $("#tab-scoped-1").attr('class', 'slds-tabs--scoped__content slds-hide');
             $("#tab-scoped-2").attr('class', 'slds-tabs--scoped__content slds-show');
             $("#tab-scoped-3").attr('class', 'slds-tabs--scoped__content slds-hide');
         }
         if(obj.id=='tab-scoped-3__item'){
             $(obj).attr("tabindex", 0);
             $(obj).attr("tabindex", 0);
             $(obj).parent("li").attr('class','slds-tabs--scoped__item slds-text-heading--label slds-active');
             //for div class
             $("#tab-scoped-1").attr('class', 'slds-tabs--scoped__content slds-hide');
             $("#tab-scoped-2").attr('class', 'slds-tabs--scoped__content slds-hide');
             $("#tab-scoped-3").attr('class', 'slds-tabs--scoped__content slds-show');
         }
   
    }
})