如何通过 alpine.js 选择选项来切换选项卡

Question

如何在小尺寸屏幕中通过选项切换选项卡？我有这段代码，它运行良好，但不适用于 select - 选项。

<div x-data="{
      openTab: 1,
      activeClasses: 'bg-indigo-500 absolute inset-x-0 bottom-0 h-0.5',
      inactiveClasses: 'bg-transparent absolute inset-x-0 bottom-0 h-0.5',
    }" class="">
      <div class="hidden">
        <label for="tabs" class="sr-only">Choose category</label>
        <select id="tabs" name="tabs"
          class="block w-full focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-sm">
          <option>Value 1</option>
          <option>Value 2</option>
          <option>Value 3</option>
          <option>Value 4</option>
        </select>
      </div>
      <div class="max-w-6xl mx-auto">
        <nav class="relative z-0 rounded-lg shadow flex divide-x divide-gray-200" aria-label="Tabs">

          <a @click="openTab = 1" :class="{ '-mb-px': openTab === 1 }" href="#" aria-current="page"
            class="text-gray-900 rounded-tl group relative min-w-0 flex-1 overflow-hidden bg-white p-3 text-lg font-medium text-center hover:bg-gray-50 focus:z-10">
            <span>Value 1</span>
            <span aria-hidden="true"
              :class="openTab === 1 ? 'bg-charcoal-900 absolute inset-x-0 bottom-0 h-0.5':'bg-transparent absolute inset-x-0 bottom-0 h-0.5'"></span>
          </a>

          <a @click="openTab = 2" :class="{ '-mb-px': openTab === 2 }" href="#" aria-current="false"
            class="text-gray-500 hover:text-gray-700 group relative min-w-0 flex-1 overflow-hidden bg-white p-3 text-lg font-medium text-center hover:bg-gray-50 focus:z-10">
            <span>Value 2</span>
            <span aria-hidden="true"
              :class="openTab === 2 ? 'bg-charcoal-900 absolute inset-x-0 bottom-0 h-0.5':'bg-transparent absolute inset-x-0 bottom-0 h-0.5'"></span>
          </a>

          <a @click="openTab = 3" :class="{ '-mb-px': openTab === 3 }" href="#" aria-current="false"
            class="text-gray-500 hover:text-gray-700 group relative min-w-0 flex-1 overflow-hidden bg-white p-3 text-lg font-medium text-center hover:bg-gray-50 focus:z-10">
            <span>Value 3</span>
            <span aria-hidden="true"
              :class="openTab === 3 ? 'bg-charcoal-900 absolute inset-x-0 bottom-0 h-0.5':'bg-transparent absolute inset-x-0 bottom-0 h-0.5'"></span>
          </a>

          <a @click="openTab = 4" :class="{ '-mb-px': openTab === 4 }" href="#" aria-current="false"
            class="text-gray-500 hover:text-gray-700 rounded-tr group relative min-w-0 flex-1 overflow-hidden bg-white p-3 text-lg font-medium text-center hover:bg-gray-50 focus:z-10">
            <span>Value 4</span>
            <span aria-hidden="true"
              :class="openTab === 4 ? 'bg-charcoal-900 absolute inset-x-0 bottom-0 h-0.5':'bg-transparent absolute inset-x-0 bottom-0 h-0.5'"></span>
          </a>

        </nav>
      </div>
      <div
        class="max-w-6xl rounded-bl rounded-br h-auto mx-auto md:flex w-full bg-white bg-opacity-50 p-5 items-center">
        <div x-show="openTab === 1" class="md:flex-1 mx-auto">Tab #1</div>
        <div x-show="openTab === 2" class="md:flex-1">Tab #2</div>
        <div x-show="openTab === 3" class="md:flex-1">Tab #3</div>
        <div x-show="openTab === 4" class="md:flex-1">Tab #4</div>
      </div>
    </div>

Answer 1

在你的实现中没有使用选择框输入来触发openTab属性的更改，我们可以使用x-model属性将选择框的值绑定到openTab变量。现在 openTab 变量将根据所选选项设置为 1 到 4。

<div x-data="{
      openTab: 1,
      activeClasses: 'bg-indigo-500 absolute inset-x-0 bottom-0 h-0.5',
      inactiveClasses: 'bg-transparent absolute inset-x-0 bottom-0 h-0.5',
    }" class="">
    <div class="hidden">
        <label for="tabs" class="sr-only">Choose category</label>
        <select id="tabs" name="tabs" x-model="openTab"
            class="block w-full focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-sm">
            <option value="1" >Value 1</option>
            <option value="2" >Value 2</option>
            <option value="3" >Value 3</option>
            <option value="4" >Value 4</option>
        </select>
    </div>
    <div class="max-w-6xl mx-auto">
        <nav class="relative z-0 rounded-lg shadow flex divide-x divide-gray-200" aria-label="Tabs">

            <a @click="openTab = 1" :class="{ '-mb-px': openTab == 1 }" href="#" aria-current="page"
                class="text-gray-900 rounded-tl group relative min-w-0 flex-1 overflow-hidden bg-white p-3 text-lg font-medium text-center hover:bg-gray-50 focus:z-10">
                <span>Value 1</span>
                <span aria-hidden="true"
                    :class="openTab == 1 ? 'bg-charcoal-900 absolute inset-x-0 bottom-0 h-0.5':'bg-transparent absolute inset-x-0 bottom-0 h-0.5'"></span>
            </a>

            <a @click="openTab = 2" :class="{ '-mb-px': openTab == 2 }" href="#" aria-current="false"
                class="text-gray-500 hover:text-gray-700 group relative min-w-0 flex-1 overflow-hidden bg-white p-3 text-lg font-medium text-center hover:bg-gray-50 focus:z-10">
                <span>Value 2</span>
                <span aria-hidden="true"
                    :class="openTab == 2 ? 'bg-charcoal-900 absolute inset-x-0 bottom-0 h-0.5':'bg-transparent absolute inset-x-0 bottom-0 h-0.5'"></span>
            </a>

            <a @click="openTab = 3" :class="{ '-mb-px': openTab == 3 }" href="#" aria-current="false"
                class="text-gray-500 hover:text-gray-700 group relative min-w-0 flex-1 overflow-hidden bg-white p-3 text-lg font-medium text-center hover:bg-gray-50 focus:z-10">
                <span>Value 3</span>
                <span aria-hidden="true"
                    :class="openTab == 3 ? 'bg-charcoal-900 absolute inset-x-0 bottom-0 h-0.5':'bg-transparent absolute inset-x-0 bottom-0 h-0.5'"></span>
            </a>

            <a @click="openTab = 4" :class="{ '-mb-px': openTab == 4 }" href="#" aria-current="false"
                class="text-gray-500 hover:text-gray-700 rounded-tr group relative min-w-0 flex-1 overflow-hidden bg-white p-3 text-lg font-medium text-center hover:bg-gray-50 focus:z-10">
                <span>Value 4</span>
                <span aria-hidden="true"
                    :class="openTab == 4 ? 'bg-charcoal-900 absolute inset-x-0 bottom-0 h-0.5':'bg-transparent absolute inset-x-0 bottom-0 h-0.5'"></span>
            </a>

        </nav>
    </div>
    <div class="max-w-6xl rounded-bl rounded-br h-auto mx-auto md:flex w-full bg-white bg-opacity-50 p-5 items-center">
        <div x-show="openTab == 1" class="md:flex-1 mx-auto">Tab #1</div>
        <div x-show="openTab == 2" class="md:flex-1">Tab #2</div>
        <div x-show="openTab == 3" class="md:flex-1">Tab #3</div>
        <div x-show="openTab == 4" class="md:flex-1">Tab #4</div>
    </div>
</div>

请注意，我已将比较从 === 更改为 == 以避免严格的类型检查（因为选择输入值是字符串）