javascript - 尝试为菜单/导航栏中的事件/默认选项卡设置 CSS，但事件类不起作用

Question

我有一个 React 组件，我根据 Tabs 组件中的子元素数量生成选项卡。

我为选项卡的基本样式以及 :focus 样式设置了 CSS，但是当组件加载时，我尝试应用 :focus< 中的相同样式 到 :active 类，以便加载菜单时的默认选项卡显示为事件选项卡，但无论出于何种原因，只需将样式传递到 :active 类无法使用我的样式组件。

现在，当菜单加载时，选项卡在标准样式中显示为非事件状态。

我的选项卡组件:

import React, { useState } from 'react';
import styled from 'styled-components';

type Props = {
  children: React.ReactNode;
};

const Tabs = (props: Props) => {
  const { children } = props;
  const [tab, setTab] = useState(0);
  const childrenList = React.Children.toArray(children);

  const tabs = childrenList.map((child, idx) => {
    const title = (child as any).props.title ?? idx;
    return (
      <StyledTabs key={title} onClick={() => setTab(idx)}>
        {title}
      </StyledTabs>
    );
  });

  const current = childrenList[tab];

  return (
    <div>
      <div>{tabs}</div>
      <div>{current}</div>
    </div>
  );
};

export default Tabs;

const StyledTabs = styled.button`
  margin: 0 10px;
  padding: 0 10px;
  padding-bottom: 5px;
  border: none;
  background: transparent;
  display: inline-block;
  font-weight: 700;
  text-transform: uppercase;

  :focus {
    color: #1471da;
    border-bottom: 1px solid #1471da;
    outline: none;
    padding-bottom: 5px;
  }

/* These Styles don't work */
    :active {
    color: #1471da;
    border-bottom: 1px solid #1471da;
    outline: none;
    padding-bottom: 5px;
  }
`;

Answer 1

我认为您将网络标准的“:active”伪选择器与自定义设置的“active”CSS 类混淆了。伪元素通常仅在单击元素时处于事件状态。参见例如这里:https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_active2 .

另一方面，例如在https://react-bootstrap.github.io/components/tabs/ ，“active”类用于表示选项卡当前打开。要自定义当前打开的选项卡，您需要确保将其设置为具有自定义类，例如“事件”。然后，您可以在 CSS 中使用“.active”而不是“:active”对其进行样式设置。