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?
  • What is the current the problem you are facing? Or are you just asking for generic advice? – glls May 10 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 at 21:16
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');
  • Thanks. I tried the code, and this line fails without error currentTab = event.target.closest('[aura:id]'); – Robs May 11 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 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 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 at 23:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.