Tailwind/TypeScript中按钮激活态颜色设置：active类失效原因及解决

为什么active:bg-blue-500没用？ #

Tailwind的active:伪类仅在鼠标按下按钮的瞬间生效，松开鼠标后样式就会消失——它的设计目的是反馈“正在点击”的瞬时状态，而非记录“已选中”的持久状态，所以没法实现你需要的点击后保持深蓝色的效果，不是类失效，是用错了场景。

而focus:bg-blue-500的局限在于，它只在按钮获得焦点时生效，点击页面其他区域按钮失去焦点，样式就会还原，同样不适合持久选中的需求。

正确解决方法：状态管理+动态样式绑定 #

要实现默认选中、点击切换且保持样式的效果，必须通过状态变量记录当前选中的学期，再根据状态给对应按钮添加样式类，而非依赖CSS伪类。

以React为例，代码示例：

import { useState } from 'react';

function SemesterCarousel() {
  // 默认选中semester 1
  const [activeSemester, setActiveSemester] = useState('semester1');

  const handleSemesterClick = (semesterKey) => {
    setActiveSemester(semesterKey);
  };

  return (
    <div className="flex gap-2">
      {/* Semester 1 按钮 */}
      <button
        onClick={() => handleSemesterClick('semester1')}
        className={`px-4 py-2 rounded transition-colors ${
          activeSemester === 'semester1' 
            ? 'bg-blue-500 text-white' 
            : 'bg-blue-100 text-blue-800 hover:bg-blue-200'
        }`}
      >
        Semester 1
      </button>

      {/* Semester 2 按钮 */}
      <button
        onClick={() => handleSemesterClick('semester2')}
        className={`px-4 py-2 rounded transition-colors ${
          activeSemester === 'semester2' 
            ? 'bg-blue-500 text-white' 
            : 'bg-blue-100 text-blue-800 hover:bg-blue-200'
        }`}
      >
        Semester 2
      </button>

      {/* 更多学期按钮同理 */}
    </div>
  );
}

如果是Vue项目，思路类似：

<template>
  <div class="flex gap-2">
    <button
      @click="activeSemester = 'semester1'"
      :class="[
        'px-4 py-2 rounded transition-colors',
        activeSemester === 'semester1' 
          ? 'bg-blue-500 text-white' 
          : 'bg-blue-100 text-blue-800 hover:bg-blue-200'
      ]"
    >
      Semester 1
    </button>
    <button
      @click="activeSemester = 'semester2'"
      :class="[
        'px-4 py-2 rounded transition-colors',
        activeSemester === 'semester2' 
          ? 'bg-blue-500 text-white' 
          : 'bg-blue-100 text-blue-800 hover:bg-blue-200'
      ]"
    >
      Semester 2
    </button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
// 默认选中semester1
const activeSemester = ref('semester1');
</script>

核心逻辑 #

1. 用状态变量（React的useState、Vue的ref）存储当前选中的学期标识
2. 按钮点击时更新状态变量
3. 给每个按钮绑定动态样式：当按钮对应的学期标识与状态变量匹配时，应用深蓝色背景；否则用默认浅蓝样式

这样就能实现：默认Semester 1显示深蓝色，点击其他按钮时切换为深蓝色，且点击页面其他区域样式不会还原。

内容的提问来源于stack exchange，提问作者Merdan Durmus