选择选项时显示选项卡内容

Question

我想在点击标签时显示一些标签内容。在小型设备上，我将显示 select。 And when the option is chosen, it show the tab content.

我该如何解决？

<div x-data="{
            activeTab:1,
            activeClass: 'border-indigo-500 text-indigo-600 whitespace-nowrap pb-4 px-6 border-b-2 font-medium',
            inactiveClass : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap pb-4 px-6 border-b-2 font-medium text-sm'
         }" class="mt-3 sm:mt-4">
            <div class="sm:hidden">
                <label for="activeTab" class="sr-only">Select a tab</label>
                <select id="activeTab" name="activeTab" class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
                    <option value="1">Tab 1</option>
                    <option value="2">Tab 2</option>
                    <option Value="3">Tab 3</option>
                </select>
            </div>
                <div class="hidden sm:block">
                    <nav class="-mb-px flex ">
                        <a href="#" x-on:click="activeTab = 1" :class="activeTab === 1 ? activeClass : inactiveClass">Tab 1</a>
                        <a href="#" x-on:click="activeTab = 2" :class="activeTab === 2 ? activeClass : inactiveClass">Tab 2</a>
                        <a href="#" x-on:click="activeTab = 3" :class="activeTab === 3 ? activeClass : inactiveClass">Tab 3</a>
                    </nav>
                </div>
                <div class="mt-6 bg-white border p-3">
                    <div x-show="activeTab === 1"> Tab 1 Content show Lorem ipsum dolor sit amet consectetur adipisicing
                        elit.
                        Quas debitis nam
                        cupiditate. Explicabo, beatae voluptates aspernatur aliquid quia hic nobis quaerat quae enim
                        quis.
                        Quas sunt ducimus numquam! Quam, perspiciatis!
                    </div>
                    <div x-show="activeTab === 2">Tab 2 Content show Lorem ipsum dolor sit amet consectetur,
                        adipisicing elit.
                        Voluptatem unde dolor
                        quaerat et possimus consequatur similique soluta corporis nam consectetur, cum, eveniet sunt,
                        nulla
                        aliquam rem. Exercitationem corporis eius voluptatibus.
                    </div>
                    <div x-show="activeTab === 3">Tab 3 Content show Lorem ipsum dolor sit amet consectetur
                        adipisicing elit. Amet,
                        distinctio
                        voluptas quis cum reprehenderit libero ea quidem voluptatem sunt suscipit, excepturi, tenetur
                        assumenda sequi eius minus temporibus earum odit soluta.
                    </div>
                </div>
            </div>

Answer 1

select是一个表单输入元素，所以我们还需要使用x-model directive to catch its value. Additionally, since you use integer comparison, we need to add the .number修饰符来将字符串值转换为数字。所以只需将 x-model.number="activeTab" 添加到 select 元素即可。

<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<div x-data="{
            activeTab:1,
            activeClass: 'border-indigo-500 text-indigo-600 whitespace-nowrap pb-4 px-6 border-b-2 font-medium',
            inactiveClass : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap pb-4 px-6 border-b-2 font-medium text-sm'
         }" class="mt-3 sm:mt-4">
  <div class="sm:hidden">
    <label for="activeTab" class="sr-only">Select a tab</label>
    <select id="activeTab" name="activeTab" x-model.number="activeTab"
      class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
      <option value="1">Tab 1</option>
      <option value="2">Tab 2</option>
      <option Value="3">Tab 3</option>
    </select>
  </div>
  <div class="hidden sm:block">
    <nav class="-mb-px flex ">
      <a href="#" x-on:click="activeTab = 1" :class="activeTab === 1 ? activeClass : inactiveClass">Tab 1</a>
      <a href="#" x-on:click="activeTab = 2" :class="activeTab === 2 ? activeClass : inactiveClass">Tab 2</a>
      <a href="#" x-on:click="activeTab = 3" :class="activeTab === 3 ? activeClass : inactiveClass">Tab 3</a>
    </nav>
  </div>
  <div class="mt-6 bg-white border p-3">
    <div x-show="activeTab === 1"> Tab 1 Content show Lorem ipsum dolor sit amet consectetur adipisicing
      elit.
      Quas debitis nam
      cupiditate. Explicabo, beatae voluptates aspernatur aliquid quia hic nobis quaerat quae enim
      quis.
      Quas sunt ducimus numquam! Quam, perspiciatis!
    </div>
    <div x-show="activeTab === 2">Tab 2 Content show Lorem ipsum dolor sit amet consectetur,
      adipisicing elit.
      Voluptatem unde dolor
      quaerat et possimus consequatur similique soluta corporis nam consectetur, cum, eveniet sunt,
      nulla
      aliquam rem. Exercitationem corporis eius voluptatibus.
    </div>
    <div x-show="activeTab === 3">Tab 3 Content show Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Amet,
      distinctio
      voluptas quis cum reprehenderit libero ea quidem voluptatem sunt suscipit, excepturi, tenetur
      assumenda sequi eius minus temporibus earum odit soluta.
    </div>
  </div>
</div>

选择选项时显示选项卡内容

Show Tab Content when option selected

html

javascript

alpine.js