DaisyUI：如何设置菜单项点击选中后的背景色？

你想要实现DaisyUI下拉菜单点击菜单项后保持选中（背景色变化）的效果，但尝试focus:bg-primary、focus-visible:bg-primary都无法持久保持状态，hover样式只能临时生效。

核心思路 #

DaisyUI的menu组件内置了active类来标记选中状态，这个类会自动应用你自定义的primary背景色。但这个状态需要通过JavaScript手动切换——纯CSS的焦点状态在点击后会丢失，无法持久保存选中状态。

修改后的代码 #

HTML部分

<div class="menu menu-horizontal space-x-3 px-1">
  <div class="dropdown dropdown-end">
    <div tabindex="0" role="button" class="btn">Phones</div>
    <ul tabindex="0" class="menu dropdown-content z-[1] p-2 shadow bg-base-100 w-52 mt-4">
      <li><a class="dropdown-item">Phone 1</a></li>
      <li><a class="dropdown-item">Phone 2</a></li>
    </ul>
  </div>
  <a class="btn">Settings</a>
</div>

JavaScript部分

// 获取所有下拉菜单项
const dropdownItems = document.querySelectorAll('.dropdown-item');

dropdownItems.forEach(item => {
  item.addEventListener('click', function() {
    // 移除所有项的active类，确保同一菜单仅一个选中项
    dropdownItems.forEach(i => i.classList.remove('active'));
    // 给当前点击的项添加active类
    this.classList.add('active');
  });
});

效果说明 #

• DaisyUI的menu组件会自动给带有active类的子项应用bg-primary样式，完全匹配你在tailwind.config.js中定义的红色主题。
• 通过JS控制active类的切换，确保点击后选中状态持久保留，且同一菜单下只有一个项处于选中状态。

自定义样式（可选） #

如果需要调整选中状态的样式，除了依赖DaisyUI主题，也可以手动定义：

<li><a class="dropdown-item hover:bg-primary/80 active:bg-primary active:text-white">Phone 1</a></li>

或者在tailwind.config.js中扩展主题：

theme: {
  extend: {
    backgroundColor: {
      'dropdown-active': '#FF0000',
    },
  },
}

之后使用active:bg-dropdown-active类即可。

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