使用 Alpine Js 的选项卡式内容 - 首次访问 Link

Question

下面的代码没有问题。

当我点击 tab1 等...链接被选中。

但我需要的是突出显示最开始加载的选项卡

我试过包含实用程序类，例如 visited:border-indigo-500

不幸的是那些没有用

<div x-data="{ tab: '#tab1' }">

    <!-- Links here -->
    <div class="flex flex-row justify-start mx-4 space-x-4 text-white bg-indigo-300">
        <div>
            <div>
                <a class="px-4 border-b-2 border-gray-900 hover:border-green-400 focus:border-green-500 active:border-indigo-500 visited:border-indigo-500"
                href="#" x-on:click.prevent="tab='#tab1'">Tab1</a>

                <a class="px-4 border-b-2 border-gray-900 hover:border-green-400 focus:border-green-500 active:border-indigo-500 visited:border-indigo-500"
                href="#" x-on:click.prevent="tab='#tab2'">Tab2</a>

                <a class="px-4 border-b-2 border-gray-900 hover:border-green-400 focus:border-green-500 active:border-indigo-500 visited:border-indigo-500"
                href="#" x-on:click.prevent="tab='#tab3'">Tab3</a>
            </div>
        </div>
    </div>

    <!-- Tab Content here -->
    <div class="flex flex-row justify-start mx-4 space-x-4">
        <div>
            <div x-show="tab == '#tab1'" x-cloak>
            <p>This is the content of Tab 1</p>
        </div>

        <div x-show="tab == '#tab2'" x-cloak>
            <p>This is the content of Tab 2</p>
        </div>

        </div>
        <div x-show="tab == '#tab3'" x-cloak>
            <p>This is the content of Tab 3</p>
        </div>
    </div>

</div>

Answer 1

您可以手动将元素聚焦在 x-init directive using x-ref. And you might want to add outline-none class 以隐藏聚焦元素上的默认浏览器轮廓。

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<script defer src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>

<div x-data="{ tab: '#tab1' }" x-init="$refs[tab].focus()">

    <!-- Links here -->
    <div class="flex flex-row justify-start mx-4 space-x-4 text-white bg-indigo-300">
        <div>
            <div>
                <a x-ref="#tab1" class="px-4 border-b-2 border-gray-900 outline-none hover:border-green-400 focus:border-green-500 active:border-indigo-500 visited:border-indigo-500"
                href="#" x-on:click.prevent="tab = '#tab1'">Tab1</a>

                <a x-ref="#tab2" class="px-4 border-b-2 border-gray-900 outline-none hover:border-green-400 focus:border-green-500 active:border-indigo-500 visited:border-indigo-500"
                href="#" x-on:click.prevent="tab = '#tab2'">Tab2</a>

                <a x-ref="#tab3" class="px-4 border-b-2 border-gray-900 outline-none hover:border-green-400 focus:border-green-500 active:border-indigo-500 visited:border-indigo-500"
                href="#" x-on:click.prevent="tab = '#tab3'">Tab3</a>
            </div>
        </div>
    </div>

    <!-- Tab Content here -->
    <div class="flex flex-row justify-start mx-4 space-x-4">
        <div>
            <div x-show="tab == '#tab1'" x-cloak>
            <p>This is the content of Tab 1</p>
        </div>

        <div x-show="tab == '#tab2'" x-cloak>
            <p>This is the content of Tab 2</p>
        </div>

        </div>
        <div x-show="tab == '#tab3'" x-cloak>
            <p>This is the content of Tab 3</p>
        </div>
    </div>

</div>

使用 Alpine Js 的选项卡式内容 - 首次访问 Link

Tabbed Content Using Alpine Js - First Visited Link

tailwind-css

alpine.js