Control Salesforce Lightning Tabs With Next & Back Buttons

Hello, In this post, we are going to create a sample lightning component to control <lightning:tab> with Next and Back buttons.

In this code we are using the lightning:tab and lightning:tabset standard component for creating tabs in a Salesforce Lightning Component.

Lightning Component : LightningTabs.cmp

<aura:component >
    <aura:attribute name="selTabId" type="string" default="1" />    
    <lightning:tabset selectedTabId="{!v.selTabId}" >
        <lightning:tab label="Fruits" id="1">
            <p>Apple</p>
            <p>Banana</p>
            <p>Mango</p>
        </lightning:tab>        
        <lightning:tab label="Vegetables" id="2">
            <p>Potato</p>
            <p>Tomato</p>
            <p>Carrots</p>
        </lightning:tab>        
        <lightning:tab label="Colors" id="3">
            <p>Red</p>
            <p>Green</p>
            <p>Blue</p>
        </lightning:tab>       
         <lightning:tab label="Cars" id="4">
            <p>BMW</p>
            <p>Maserati</p>
            <p>Audi</p>
        </lightning:tab>        
    </lightning:tabset>
    <div class="slds-clearfix">
      <div class="slds-float_left">
          <!--disabled the back button on first Tab-->    
        <lightning:button disabled="{!v.selTabId == '1'}" variant="neutral" label="Back" onclick="{!c.back}" />
      </div>
      <div class="slds-float_right">
        <lightning:button variant="brand" label="Next" onclick="{!c.next}" />
      </div>
    </div>   
</aura:component>

JavaScript Controller : LightningTabsController.js

({
  next : function(component, event, helper) {
      // get the current selected tab value
      var currentTab = component.get("v.selTabId");       
      if(currentTab == '1'){
          component.set("v.selTabId" , '2');   
      }else if(currentTab == '2'){
          component.set("v.selTabId" , '3');     
      }else if(currentTab == '3'){
          component.set("v.selTabId" , '4');             
      }else if(currentTab == '4'){
          alert('Complete !');  
      } 
  },   
  back : function(component, event, helper) {
      // get the current selected tab value  
      var currentTab = component.get("v.selTabId");        
      if(currentTab == '2'){
          component.set("v.selTabId" , '1');     
      } else if(currentTab == '3'){
          component.set("v.selTabId" , '2');     
      } else if(currentTab == '4'){
          component.set("v.selTabId" , '3');     
      }
  }
})

demo.app [Lightning Application]

<aura:application extends="force:slds">
    <c:LightningTabs/>
    <!-- here c: is org. default namespace prefix-->
</aura:application>