1

I am creating a custom menu using the Salesforce Lightning Design System Global Navigation with sub tabs

<div class="slds-context-bar slds-context-bar_tabs">
    <div class="slds-context-bar__secondary">
            <div class="slds-context-bar__vertical-divider"></div>
            <ul class="slds-grid" role="tablist">

                <li aura:id="tab"
                    class="slds-context-bar__item slds-context-bar__item_tab slds-is-active slds-has-sub-tabs"
                    role="presentation">
                    <a href="javascript:void(0);" onclick="{!c.handleClick}" data-record-id="menuItem2"
                        class="slds-context-bar__label-action" role="tab" aria-selected="true" tabindex="0"
                        aria-controls="context-tab-panel-1" id="context-tab-id-1">
                        <span class="slds-indicator-container"></span>
                        <span class="slds-truncate">Menu Item 1</span>
                    </a>
                </li>

                <li aura:id="tab" class="slds-context-bar__item slds-context-bar__item_tab" role="presentation">
                    <a href="javascript:void(0);" onclick="{!c.handleClick}" data-record-id="menuItem2"
                        class="slds-context-bar__label-action" role="tab" aria-selected="false"
                        tabindex="-1" aria-controls="context-tab-panel-2" id="context-tab-id-2">
                        <span class="slds-indicator-container"></span>
                        <span class="slds-truncate">Menu Item 2</span>
                    </a>
                </li>
            </ul>
     </div>
</div>

I have a JavaScript controller method which handles the onclick event on the <a> tag:

   handleClick: function (cmp, event, helper) {

        var tabs = cmp.find('tab');
        var currentTab = event.target.closest('[aura:id]');
        tabs.forEach(tab => { 
           $A.util.removeClass(tab, 'slds-is-active'); 
           $A.util.removeClass(tab, 'slds-has-sub-tabs');
        });
        $A.util.addClass(currentTab, 'slds-is-active');
        $A.util.addClass(currentTab, 'slds-has-sub-tabs');

        helper.changeTab(event.currentTarget.dataset.recordId);
    },

When the tab is clicked, I need to remove these css classes:

  • slds-is-active
  • slds-has-sub-tabs

From the <li> of the previously active tab, and then add the same classes to the <li> of the tab just clicked.

Questions

  1. How am I meant to reference the previously selected tab, to be able to remove the CSS classes, when the event happens on a different <a> tag?
  2. How am I meant to apply the CSS classes to the parent tag of the newly selected <a> tag?
2
  • What is the current the problem you are facing? Or are you just asking for generic advice?
    – glls
    May 10, 2019 at 21:14
  • The problem is that I don't know how to solve the above problem :) ... so I would like some advice on how to do it.
    – Robs
    May 10, 2019 at 21:16

1 Answer 1

2

As a simple way to do this, just remove the classes from all the tabs, then add them to the new tab. The browser is smart enough to not perform a re-render until a script completes, so you should get decent performance.

var tabs = cmp.find('tab'), currentTab = event.target.closest('[aura:id]');
tabs.forEach(tab => { 
  $A.util.removeClass(tab.getElement(), 'slds-is-active'); 
  $A.util.removeClass(tab.getElement(), 'slds-has-sub-tabs');
});
$A.util.addClass(currentTab, 'slds-is-active');
$A.util.addClass(currentTab, 'slds-has-sub-tabs');
4
  • Thanks. I tried the code, and this line fails without error currentTab = event.target.closest('[aura:id]');
    – Robs
    May 11, 2019 at 10:12
  • OK, so doing var currentTab = event.target.closest('li'); works. Now the removeClass method calls in the forEach don't work... any ideas?
    – Robs
    May 11, 2019 at 22:46
  • 1
    @Robs Let me play with it; I didn't actually test this one before I wrote it :p
    – sfdcfox
    May 11, 2019 at 22:49
  • 1
    @Robs Okay, so... You need the source element to get the desired effect. I've updated the code to reflect this.
    – sfdcfox
    May 11, 2019 at 23:08

You must log in to answer this question.

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