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

问题描述

我在表格顶部使用Tab from Semantic UI。它包含更多选项卡，我在开发人员工具中注意到，所选的选项卡在其常规类元素旁边还包含一个新元素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',minWidth: 300,}}>
            <p>List</p>
          </Menu.Item>
        ),render: () => <Tab.Pane>{listTab}</Tab.Pane>
      },];

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

在检查模式下，选定的选项卡具有此类：active item tab-title，而未选定的选项卡具有item tab-title。

有没有办法在代码中使用它？例如，如果类包含active，我想用另一个URL更改背景URL。

解决方法

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

编辑： 另外，您可以添加看起来像的css

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

,

尝试类似这样的方法来动态设置css属性。

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