尝试为菜单/导航栏中的活动/默认选项卡设置 CSS，但活动类不起作用答案

【问题标题】：Trying to set CSS for active/default tab in menu/navbar but the active class is not working尝试为菜单/导航栏中的活动/默认选项卡设置 CSS，但活动类不起作用
【发布时间】：2020-08-20 05:27:55
【问题描述】：

我有一个 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;
  }
`;

【问题讨论】：

标签： javascript css reactjs typescript

【解决方案1】：

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

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

【讨论】：