如何使用顺风css在同一个html页面上选择多个按钮选项？

Question

这就是我现在所拥有的在HTML页面中以行/列方式环绕的按钮。我打算让用户能够同时选择多个按钮

  <div class = "p-5">
    <button class="hover:bg-green-200 border border-gray-700 py-2 px-4 rounded w-40">
      <div class = "text-left text-black font-bold">
        Hoppy
      </div>
    </button>
  </div>

  <div class = "p-5">
    <button class="hover:bg-green-200 border border-gray-700 py-2 px-4 rounded w-40">
      <div class = "text-left text-black font-bold">
        Fruity/Citrus
      </div>
    </button>
  </div>

  <div class = "p-5">
    <button class="hover:bg-green-200 border border-gray-700 py-2 px-4 rounded w-40">
      <div class = "text-left text-black font-bold">
        Roasty/Coffee
      </div>
    </button>
  </div>
  
    <div class = "p-5">
        <button class="hover:bg-green-200 border border-gray-700 py-2 px-4 rounded w-40">
        <div class = "text-left text-black font-bold">
            Chocolate
        </div>
        </button>
    </div>

<div class = "p-5">
    <button class="hover:bg-green-200 border border-gray-700 py-2 px-4 rounded w-40">
      <div class = "text-left text-black font-bold">
        Not sure
      </div>
    </button>
</div>

</div>

Answer 1

我在某种程度上随意清理了你的代码，但为了回答你的问题，你需要javascript来实现你需要的东西。

我使用的是AlpineJS，它使用Vue like语法，但基本上您需要添加一个类，以显示用户单击的每个按钮的“选中”状态。

检查下面的代码片段，查看它的实际效果：

​

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.css" rel="stylesheet" />

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.min.js" defer></script>


<div class="flex justify-center">
  <div class="p-5" x-data="{ active: false }">
    <button :class="{ 'bg-red-300': active }" class="hover:bg-green-200 border border-gray-700 py-2 px-4 rounded w-40 text-left text-black font-bold" @click="active = !active">
      Hoppy
    </button>
  </div>
  <div class="p-5" x-data="{ active: false }">
    <button :class="{ 'bg-red-300': active }" class="hover:bg-green-200 border border-gray-700 py-2 px-4 rounded w-40 text-left text-black font-bold" @click="active = !active">
      Chocolate
    </button>
  </div>
</div>

​