如何用Tailwind CSS实现导航栏点击切换文字颜色（单选高亮）

要实现点击导航项切换文字颜色、其他项恢复默认的效果，结合你现有代码里的@click指令判断是Vue项目，可通过状态绑定+动态class实现，具体步骤如下：

步骤1：添加状态变量 #

在组件的脚本部分定义响应式变量，记录当前选中的导航项标识：

// Vue 3 Composition API示例
import { ref } from 'vue'
const currentActive = ref('user') // 默认选中第一个导航项

如果是Vue 2选项式写法：

export default {
  data() {
    return {
      currentActive: 'user'
    }
  }
}

步骤2：修改导航项的动态class #

给每个<a>标签绑定动态class，根据currentActive的值判断是否应用选中颜色：

• 默认文字颜色：text-gray-700 dark:text-gray-400
• 选中时颜色：text-cyan-400（和hover/focus颜色保持统一）

修改后的完整导航栏代码：

<ul
  class="flex flex-col p-4 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-white dark:border-gray-700"
>
  <li>
    <a
      href="#user"
      :class="[
        'block py-2 pl-3 pr-4 rounded md:hover:bg-transparent md:hover:text-cyan-400 md:p-0 md:dark:hover:bg-transparent dark:border-gray-700 focus:outline-none focus:text-cyan-400',
        currentActive === 'user' ? 'text-cyan-400 dark:text-cyan-400' : 'text-gray-700 dark:text-gray-400'
      ]"
      @click="scrollToDiv('#user'); currentActive = 'user'"
      >User</a
    >
  </li>
  <li>
    <a
      href="#enterprise"
      :class="[
        'block py-2 pl-3 pr-4 rounded md:hover:bg-transparent md:hover:text-cyan-400 md:p-0 md:dark:hover:bg-transparent dark:border-gray-700 focus:outline-none focus:text-cyan-400',
        currentActive === 'enterprise' ? 'text-cyan-400 dark:text-cyan-400' : 'text-gray-700 dark:text-gray-400'
      ]"
      @click="scrollToDiv('#enterprise'); currentActive = 'enterprise'"
      >Enterprise</a
    >
  </li>
  <li>
    <a
      href="#customer"
      :class="[
        'block py-2 pl-3 pr-4 rounded md:hover:bg-transparent md:hover:text-cyan-400 md:p-0 md:dark:hover:bg-transparent dark:border-gray-700 focus:outline-none focus:text-cyan-400',
        currentActive === 'customer' ? 'text-cyan-400 dark:text-cyan-400' : 'text-gray-700 dark:text-gray-400'
      ]"
      @click="scrollToDiv('#customer'); currentActive = 'customer'"
      >Customer</a
    >
  </li>
</ul>

关键说明 #

• 把固定样式类提取到数组第一个元素，动态判断的颜色类放在第二个元素，结构更清晰
• 点击事件中同时触发滚动方法和更新currentActive值，确保选中状态和滚动目标同步
• 深色模式下的选中颜色同步设置为dark:text-cyan-400，保持风格统一

如果是纯原生JS项目（非Vue），可用DOM操作实现：

const navLinks = document.querySelectorAll('ul a');
let activeLink = null;

navLinks.forEach(link => {
  link.addEventListener('click', () => {
    // 移除之前选中项的样式
    if (activeLink) {
      activeLink.classList.remove('text-cyan-400', 'dark:text-cyan-400');
      activeLink.classList.add('text-gray-700', 'dark:text-gray-400');
    }
    // 设置当前选中项的样式
    link.classList.remove('text-gray-700', 'dark:text-gray-400');
    link.classList.add('text-cyan-400', 'dark:text-cyan-400');
    activeLink = link;
    // 执行滚动逻辑
    scrollToDiv(link.getAttribute('href'));
  });
});

内容的提问来源于stack exchange，提问作者im yoona