SLDS is purely CSS-driven and therefore has no JS tied to it out of the box. Luckily, there is Appiphony Lightning JS (http://aljs.appiphony.com). It's a set of jQuery plugins and Ember.js components you can use to get those tabs working. It also has other useful components, such as Datepickers, Modals, and Tooltips.
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);
},
})
Best Answer
Per the documentation
So you will need to write JS that handles placing the
slds-active
classes and theslds-show
/slds-hide
classes when a user clicks a tab.