Css 如何单击外部按钮并保持活动样式？-阿尔皮内斯酒店；尾风

我在这个项目中使用了TailwindCSS和AlpineJS。有两个按钮可切换选项卡，第一个按钮具有自动对焦功能。切换选项卡时，另一个按钮将激活：

我希望只有在单击另一个按钮时，该按钮才处于非活动状态。有没有一种方法可以使用AlpineJS和TailwindCSS实现这一点？类似于用@click.away绑定活动类。 提前谢谢。 这是我的密码：

<div class="flex flex-col">
   <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
      <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
         <div x-data="{ openTab: 1, coin: 0 }" class="overflow-hidden border-b border-gray-200 shadow sm:rounded-lg">
            <div class="flex items-center justify-between px-10 py-8 bg-white wrapper">
               <div>
                  <h3 class="lg:text-2xl sm:text-lg">Saldos</h3>
                  <h1 class="font-normal lg:text-4xl sm:text-3xl">$0.00</h1>
               </div>
               <div class="inline-flex items-center justify-center mr-2">
                  <div aria-label="Lista" data-balloon-pos="up" id="show-tip">
                     <button class="p-1 mr-1 text-gray-500 rounded-lg outline-none active:text-gray-200 hover:text-gray-200 focus:text-gray-200 focus:outline-none hover:bg-gray-700 focus:bg-gray-700" type="button" @click="openTab = 1" autofocus>
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path><path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"></path></svg>
                     </button>
                  </div>
                  <div aria-label="Alocação de Ativos" data-balloon-pos="up" id="show-tip">
                     <button class="p-1 mr-1 text-gray-500 rounded-lg outline-none hover:text-gray-200 focus:text-gray-200 active:text-gray-200 focus:outline-none hover:bg-gray-700 focus:bg-gray-700" type="button" @click="openTab = 2">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path><path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path></svg>
                     </button>
                  </div>
               </div>
            </div>
            <div x-show="openTab === 1">
               etc
            </div>
            <div class="flex flex-col justify-between py-2 bg-white lg:flex-row sm:px-6 lg:px-8" x-show="openTab === 2">
               etc
         </div>
      </div>
   </div>
</div>

萨尔多斯
$0.00
等
等

您可以使用Alpine.js

x-bind:class

对象语法切换类，例如

:class=“{'活动类]：openTab==1}”

有关第一个选项卡，请参阅以下代码片段。您还可以绑定

：disabled=“openTab！==1”

以禁用按钮（对于第一个按钮）

---

谢谢你，雨果！