HTMl按钮的点击样式

最近在写HTML, 遇到个问题, 就是HACKER-TALK的按钮点击样式, 点击后按钮样式改变了, 当只有点击了同组的其他按钮, 之前被点击的按钮样式才会变回去,; 点击其他地方, 此按钮样式不会发生改变, 这个效果该咋做啊? 我做不出来, 求大佬指点

vuejs·html
117 views
Comments
登录后评论
Sign In
·

有几种写法实现：

一种是纯 css 的，配合 input radio 和 checked 属性，控制选中的按钮样式，通过 hover 和 active 伪类控制点击动画。

另一种就是纯按钮，然后用 js 控制 selected 的按钮样式变化。

·

黑客说是用 js 实现的，给你一个完整的 Tab 组件代码：

import React, {
  FC,
  MouseEvent,
  ReactElement,
  ReactNode,
  Children,
  isValidElement,
  useState,
  useEffect
} from 'react';
import { Link } from 'react-router-dom';
import clsx from 'clsx';

interface TabProps {
  type?: 'link' | 'button';
  label?: string;
  value?: string | number;
  replace?: boolean;
  disabled?: boolean;
  children?: ReactNode;
}

interface TabsProps {
  defaultValue?: string | number;
  children: ReactElement<TabProps> | (ReactElement<TabProps> | ReactNode)[];
  onChange?: (value: string | number) => void;
}

export const Tab: FC<TabProps> = ({ children }) => {
  return <div>{children}</div>;
};

Tab.defaultProps = {
  type: 'button',
  replace: true,
};

const Tabs: FC<TabsProps> = ({ children, defaultValue, onChange }) => {
  const [value, setValue] = useState<string | number>(defaultValue || '');

  useEffect(() => {
    setValue(defaultValue || '');
  }, [defaultValue]);

  const onClickTab = (newValue?: string | number) => (e: MouseEvent) => {
    e.stopPropagation();
    setValue(newValue || '');
    onChange?.(newValue || '');
  };

  return (
    <div className="bg-content border-main-content">
      <div className="h-13 px-4 flex items-center space-x-2">
        {Children.map(children, element => {
          if (!isValidElement<TabProps>(element)) {
            return null;
          }
          const className = clsx(
            'text-sm font-bold px-3 py-1.5 rounded-lg',
            value === element.props.value
              ? 'text-blue-500 bg-slate-100 dark:bg-slate-700'
              : 'text-color-secondary bg-btn'
          );
          if (element.props.type === 'link') {
            return (
              <Link
                className={className}
                to={element.props.value ? `${element.props.value}` : '/'}
                replace={element.props.replace}
              >
                {element.props.label}
              </Link>
            );
          }

          return (
            <button
              disabled={element.props.disabled}
              className={className}
              onClick={onClickTab(element.props.value)}
            >
              {element.props.label}
            </button>
          );
        })}
      </div>
      <div className="mx-4 border-t-primary" />
      {Children.map(children, element => {
        if (!isValidElement<TabProps>(element)) return null;
        if (element.props.value !== value) return null;
        return element;
      })}
    </div>
  );
};

export default Tabs;