Check if the css class is changed when a Tab is clicked

Question

I'm using Tab from Semantic UI for the top of a table. It contains more tabs and I noticed in Developer tools that the selected one contains beside its normal class elements a new element active.

This is the code:

 const panes = [
      {
        menuItem: (
          <Menu.Item
            className="tab-title"
            key="Reference"
            style={{
              display: 'block',
              background:'url(https://svgshare.com/i/Nnu.svg) left center no-repeat',
              backgroundSize: 'cover',
              minWidth: 292,
              borderColor: 'transparent',
            }}>
            <p>Reference</p>
          </Menu.Item>
        ),
        render: () => <Tab.Pane>{referenceTab}</Tab.Pane>,
      },
      {
        menuItem: (
          <Menu.Item
            className="tab-title"
            key="List"
            style={{
              display: 'block',
              background:'url(https://svgshare.com/i/Nnu.svg) left center no-repeat',
              backgroundSize: 'cover',
              minWidth: 300,
              borderColor: 'transparent',
            }}>
            <p>List</p>
          </Menu.Item>
        ),
        render: () => <Tab.Pane>{listTab}</Tab.Pane>
      },
    ];

    return (
      <Layout>
          <TabContainer panes={panes} />
      </Layout>
    );

And in inspect mode, the selected tab has this class: active item tab-title while the non-selected one has item tab-title.

Is there a way to use this in code? For example I want to change the background url with another one if class contains active.

Answer 1

You can use Element.classList.contains("active"). MDN for classList. MDN for contains

Edit: Alternatively, you could add css which would look like

.active.tab-title {
   background-color:red;
}