1

I am trying to add a Lightning Tab component to several custom Lightning Community pages and have the corresponding tab highlighted for the page it is on. Example: If I I am on the Home page I want the Home tab to be highlighted, if I am on the Overview page I want the Overview tab highlighted and so on.

For a lightning:tabset where do I specify the href for the corresponding page for each tab?

Component:

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global">
<div class="demo-only" style="height:10rem">
    <lightning:tabset>
        <lightning:tab label="1st tab" onactive="{!c.loadFirstTab}" id="One">
        </lightning:tab>
        <lightning:tab label="2nd tab" onactive="{!c.loadSecondTab}" id="Two">
        </lightning:tab>
    </lightning:tabset>
</div>

JS:

({
loadFirstTab : function(component, event, helper) {
// do whatever you want
},
loadSecondTab : function(component, event, helper) {
// do whatever you want
},
selectedTab : function(component, event, helper) { 
component.find("tabSet").set("v.selectedTabId", tabId);
},

})

Improve this question
3
  • a quick tip, instead of adding, removing classes, you can use the Toggle method from the $A.util class
    – glls
    Commented Jul 6, 2018 at 18:55
  • additionally, any reason you are not using the lightning:tabset component?
    – glls
    Commented Jul 6, 2018 at 18:56
  • See the changes above. Thanks for the pointer on tabset. how do I specify what page to load with the corresponding tab?
    – Matt Brown
    Commented Jul 6, 2018 at 20:44

1 Answer 1

Reset to default
3

If you go through the attributes of the component, you might notice that selectedTabId allows you to do this.

Allows you to set a specific tab to open by default. If this attribute is not used, the first tab opens by default.

lightning:tabset

Ex:

<aura:component>
    <lightning:tabset aura:id="tabSet" selectedTabId="one">
        <lightning:tab label="Item One" id="one">
          Sample Content One
        </lightning:tab>
        <lightning:tab label="Item Two" id="two">
          Sample Content Two
        </lightning:tab>
    </lightning:tabset>
</aura:component>

Controller:

selectedTab : function(component, event, helper) { 

    /*set the tab id you want based on your logic*/

    component.find("tabSet").set("v.selectedTabId", tabId);
},
Improve this answer
9
  • Getting there :) Thanks for the help. Where and how do I specify the actual page to load on the selected tab. The selected tab is now indeed the highlighted tab but the selected tab is just that and does not open the page it should.
    – Matt Brown
    Commented Jul 9, 2018 at 15:25
  • please dont follow up in the comments with code, not fery user fiendly. Better if you open a new post with your current code and what doesnt seem to work. tHx!
    – glls
    Commented Jul 9, 2018 at 15:34
  • Yeah I am a novice. :(
    – Matt Brown
    Commented Jul 9, 2018 at 15:36
  • you'll get the hang of it =P
    – glls
    Commented Jul 9, 2018 at 15:52
  • Ok updated the original. Where and how do I specify the actual page to load on the selected tab? The selected tab is now indeed the highlighted tab but the selected tab is just that and does not open the page it should.
    – Matt Brown
    Commented Jul 9, 2018 at 15:57

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .