单击选项卡时检查 css class 是否更改

Question

我正在使用 Tab from Semantic UI 作为 table 的顶部。它包含更多选项卡，我在开发人员工具中注意到，所选选项卡在其正常 class 元素旁边包含一个新元素 active.

这是代码：

 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>
    );

并且在检查模式下，选定的选项卡具有此 class：active item tab-title 而未选定的选项卡具有 item tab-title.

有没有办法在代码中使用它？例如，如果 class 包含 active.

，我想用另一个更改背景 url

Answer 1

您可以使用 Element.classList.contains("active")。 MDN for classList. MDN for contains

编辑：或者，您可以添加 css 看起来像

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

Answer 2

尝试像这样动态设置 css 属性。

style={{          
  background-color: ${active ? 'red' : 'blue'},         
}}>

单击选项卡时检查 css class 是否更改

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

html

javascript

css

reactjs

semantic-ui