SF lightning design system slds-Tabs rendering issue when switching between 2 lightning component tabs from salesforce custom left navigation Tabs

Question

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);
    },

Answer 1

Noticed a few things: 1. your attribute names were different between the component (v.thisSelected, v.thatSelected) and the controller (v.aSelected, v.pSelected). 2. the component markup had both tabs set to slds-show at first.

Try this out to start, hope it works for you.

component:

<aura:component >
<ltng:require styles="/resource/SLDS/assets/styles/salesforce-lightning-design-system-vf.css"/>
<aura:attribute name="thisSelected" type="Boolean"/>
<aura:attribute name="thatSelected" type="Boolean"/>
<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.onClickThat}" 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">
        tab 1 (This)
    </div>
    <div id="thatTab" aura:id="thatTabData" class="slds-tabs--default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-2__item">
        tab 2 (That)
    </div>
</div>

controller:

({
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.thisSelected", true);

    $A.util.removeClass(thatTab, 'slds-active');
    $A.util.removeClass(thatTabData, 'slds-show');
    $A.util.addClass(thatTabData, 'slds-hide');
    component.set("v.thatSelected", 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.thisSelected", false);

    $A.util.addClass(thatTab, 'slds-active');
    $A.util.removeClass(thatTabData, 'slds-show');
    $A.util.addClass(thatTabData, 'slds-show');
    component.set("v.thatSelected", true);
},
})