Dynamically set css class based on the selected tab

Question

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.

Answer 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";