I am facing an issue with the slds lightning tabs displaying on lightning component.when i switch between tabs on salesforce left navigation with custom objects tab the tabs on landing page of my application appear but when i try to switch/navigate from other Lightning component tab to my lightning component Tab, my Lightning application slds tabs on component landing page disappear.I checked in debugger and it renders HTML but i can't see tabs on my screen.If i refresh at this point, my tabs starts showing up. my sample code include
<div class="slds">
<div class="slds-tabs--default">
<ul class="slds-tabs--default__nav" role="tablist">
<li aura:id="thisTab" class="slds slds-tabs--default__item slds-active" title="This" onclick="{!c.onClickThis}" role="presentation">
<a class="slds-tabs--default__link" role="tab" tabindex="0" aria-selected="{!v.thisSelected}" aria-controls="thisTab" id="tab-default-1__item">This</a>
</li>
<li aura:id="thatTab" class="slds slds-tabs--default__item" title="That" onclick="{!c.onClickThatt}" role="presentation">
<a class="slds-tabs--default__link" role="tab" tabindex="-1" aria-selected="{!v.thatSelected}" aria-controls="thatTab" id="tab-default-2__item">That</a>
</li>
</ul>
<div id="thisTab" aura:id="thisTabData" class="slds-tabs--default__content slds-show" role="tabpanel" aria-labelledby="tab-default-1__item"></div>
<div id="thatTab" aura:id="thatTabData" class="slds-tabs--default__content slds-show" role="tabpanel" aria-labelledby="tab-default-2__item"></div>
</div>
</div>`
onClickThis: function(component, event, helper) {
var thisTab = component.find('thisTab');
var thisTabData = component.find('thisTabData');
var thatTab = component.find('thatTab');
var thatTabData = component.find('thatTabData');
$A.util.addClass(thisTab, 'slds-active');
$A.util.addClass(thisTabData, 'slds-show');
$A.util.removeClass(thisTabData, 'slds-hide');
component.set("v.pSelected", true);
$A.util.removeClass(thatTab, 'slds-active');
$A.util.removeClass(thatTabData, 'slds-show');
$A.util.addClass(thatTabData, 'slds-hide');
component.set("v.aSelected", false);
},
onClickThat: function(component, event, helper) {
var thisTab = component.find('thisTab');
var thisTabData = component.find('thisTabData');
var thatTab = component.find('thatTab');
var thatTabData = component.find('thatTabData');
$A.util.removeClass(thisTab, 'slds-active');
$A.util.removeClass(thisTabData, 'slds-show');
$A.util.addClass(thisTabData, 'slds-hide');
component.set("v.pSelected", false);
$A.util.addClass(thatTab, 'slds-active');
$A.util.removeClass(thatTabData, 'slds-show');
$A.util.addClass(thatTabData, 'slds-show');
component.set("v.aSelected", true);
},