1

I am trying to set the CSS class slds-is-active based on the selected

HTML

<template for:each={menuBarList} for:item="mb" for:index="index">
          <li key={mb.label} data-menubarlabel={mb.label} class={mb.activeClass}>
            <a data-menubar={mb.label} class="slds-context-bar__label-action" title={mb.label}
              onclick={handleSelectMenuBar}>
              <!-- <span class="slds-assistive-text">Current Page:</span> -->
              <span class="slds-truncate" title={mb.label}>{mb.label}</span>
            </a>
          </li>
        </template>

JS

   handleSelectMenuBar(event) {
        const scQuickviewTabElements = this.template.querySelectorAll(
            "li.slds-context-bar__item slds-is-active"
        );
        scQuickviewTabElements.forEach((el) => {
            el.classList.remove("slds-is-active");
        });
        event.currentTarget.classList.add("slds-is-active");
        this.menuBarName = event.currentTarget.dataset.menubar;
}

JSON

[
    {
        "activeClass": "slds-context-bar__item slds-is-active",
        "key": 1,
        "label": "Timesheet",
        "value": "Timesheet"
    },
    {
        "activeClass": "slds-context-bar__item",
        "key": 2,
        "label": "Timesheet Approval",
        "value": "Timesheet Approval"
    }
]

Trying to remove slds-is-active and add this to selected event. The above code is not working, Can anyone help me what iam missing here

Thanks in Advance.

1

Instead of event.currentTarget.classList.add("slds-is-active");

Try below one

const addActiveClass = this.template.querySelector('[data-menubarlabel="' + this.menuBarName + '"]');
addActiveClass.className = "slds-context-bar__item slds-is-active";

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.