function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Aakanksha Singh 11Aakanksha Singh 11 

How to apply JQuery/Javascript in tabs of Lightning Design System in lightning component?

Hello everyone,

Could you help me with applying jquery/javascript in tabs designed through lightning design system in lightning component.

link: https://www.lightningdesignsystem.com/components/tabs/#flavor-scoped

Thank you
Aakanksha Singh
sfdcMonkey.comsfdcMonkey.com
hi Ankansha singh 
use below code
here is sample code for swipe between 3 tabs  
<aura:component>
   <ltng:require styles="{! $Resource.SLDS090 + '/assets/styles/salesforce-lightning-design-system.css'}"/>
     <div class="slds">
    <!--tab start--> 
     <div class="slds-tabs--scoped">
        <ul class="slds-tabs--scoped__nav" role="tablist">
           <li aura:id="t1" class="slds-tabs--scoped__item slds-text-title--caps slds-active" title="your tab 1" role="presentation" onclick="{! c.tabOneAction}"><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">your tab 1 </a></li>
           <li aura:id="t2" class="slds-tabs--scoped__item slds-text-title--caps" title="your tab 2" role="presentation" onclick="{! c.tabTwoAction}"><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">your tab 2</a></li>
           <li aura:id="t3" class="slds-tabs--scoped__item slds-text-title--caps" title="your tab 3" role="presentation" onclick="{!c.tabThreeAction}"><a class="slds-tabs--scoped__link" href="javascript:void(0);" role="tab" tabindex="-2" aria-selected="true" aria-controls="tab-scoped-1" id="tab-scoped-1__item">your tab 3</a></li>
        </ul>
        <div aura:id="tab1" class="slds-tabs--scoped__content slds-show" role="tabpanel" aria-labelledby="tab-scoped-1__item">
            <p>i am first tab</p>
            <p>i am first tab</p>
            <p>i am first tab</p>
            <p>i am first tab</p>    
         </div>      
    
    <div aura:id="tab2" class="slds-tabs--scoped__content slds-hide" role="tabpanel" aria-labelledby="tab-scoped-2__item">
         <p>i am second tab</p>
            <p>i am second tab</p>
            <p>i am second tab</p>
            <p>i am second tab</p>                 
     </div>
      <div aura:id="tab3" class="slds-tabs--scoped__content slds-hide" role="tabpanel" aria-labelledby="tab-scoped-3__item">
            <p>i am third tab</p>
            <p>i am third tab</p>
            <p>i am third tab</p>
            <p>i am third tab</p>
      </div>
        
                </div>
  <!--tab end-->
    </div>
</aura:component>
controller 
  
({
	  tabOneAction: function(component, event, helper) {
		var tab1 = component.find('t1');
		var showTab1 = component.find('tab1');

		var tab2 = component.find('t2');
		var showTab2 = component.find('tab2');
        
        var tab3 = component.find('t3');
		var showTab3 = component.find('tab3');

		$A.util.addClass(tab1, 'slds-active');
		$A.util.addClass(showTab1, 'slds-show');
		$A.util.removeClass(showTab1, 'slds-hide');


		$A.util.removeClass(tab2, 'slds-active');
		$A.util.removeClass(showTab2, 'slds-show');
		$A.util.addClass(showTab2, 'slds-hide');
        
        $A.util.removeClass(tab3, 'slds-active');
		$A.util.removeClass(showTab3, 'slds-show');
		$A.util.addClass(showTab3, 'slds-hide');
      },
    tabTwoAction: function(component, event, helper) {

		var tab1 = component.find('t1');
		var showTab1 = component.find('tab1');

		var tab2 = component.find('t2');
		var showTab2 = component.find('tab2');
        
        var tab3 = component.find('t3');
		var showTab3 = component.find('tab3');

		$A.util.removeClass(tab1, 'slds-active');
		$A.util.removeClass(showTab1, 'slds-show');
		$A.util.addClass(showTab1, 'slds-hide');

        $A.util.addClass(tab2, 'slds-active');
		$A.util.removeClass(showTab2, 'slds-hide');
		$A.util.addClass(showTab2, 'slds-show');
        
        
        $A.util.removeClass(tab3, 'slds-active');
		$A.util.removeClass(showTab3, 'slds-show');
		$A.util.addClass(showTab3, 'slds-hide');
	}, 
    
    tabThreeAction : function(component,event,helper){
        var tab1 = component.find('t1');
		var showTab1 = component.find('tab1');

		var tab2 = component.find('t2');
		var showTab2 = component.find('tab2');

        var tab3 = component.find('t3');
		var showTab3 = component.find('tab3');
        
		$A.util.removeClass(tab1, 'slds-active');
		$A.util.removeClass(showTab1, 'slds-show');
		$A.util.addClass(showTab1, 'slds-hide');
        

        $A.util.removeClass(tab2, 'slds-active');
		$A.util.removeClass(showTab2, 'slds-show');
		$A.util.addClass(showTab2, 'slds-hide');  
        
        
        $A.util.addClass(tab3, 'slds-active');
        $A.util.addClass(showTab3, 'slds-hide'); 
		$A.util.addClass(showTab3, 'slds-show');
        
    },
})

i hop it helps you 
Mark it best answer if it helps you so it make proper solution for others ;
Thanks :)