Laravel10+Tailwind+Flowbite下用jQuery程序化切换Tab

针对你基于Laravel Blade、Tailwind和Flowbite构建的双Tab页面，以下几种方法可以实现页面加载时默认显示第二个Tab，同时支持程序化切换Tab：

方法一：使用Flowbite Tabs官方API（推荐） #

Flowbite的Tabs组件提供了原生API来控制切换，这种方法不会破坏组件的原有交互逻辑：

$(document).ready(function() {
    // 获取Tabs实例（通过ul的id）
    const tabsInstance = new Flowbite.Tabs(document.getElementById('admin-document-tabs'));
    // 切换到第二个Tab（索引从0开始，1对应Folders）
    tabsInstance.show(1);
});

方法二：jQuery手动控制DOM状态 #

如果需要自定义切换逻辑，可以直接操作DOM元素的类和属性：

$(document).ready(function() {
    // 1. 处理Tab按钮的激活状态
    $('#documents-styled-tab')
        .removeClass('text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500')
        .addClass('text-gray-500 border-gray-100 dark:text-gray-400 dark:border-gray-700')
        .attr('aria-selected', 'false');

    $('#folders-styled-tab')
        .removeClass('text-gray-500 border-gray-100 dark:text-gray-400 dark:border-gray-700')
        .addClass('text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500')
        .attr('aria-selected', 'true');

    // 2. 切换Tab内容的显示状态
    $('#styled-documents').addClass('hidden');
    $('#styled-folders').removeClass('hidden');
});

方法三：直接修改HTML初始状态（无需JS） #

如果只是需要默认显示第二个Tab，不需要动态切换逻辑，可以直接修改HTML的初始属性和类：

修改Tab按钮部分： #

<li class="me-2" role="presentation">
    <button class="inline-block p-4 border-b-2 rounded-t-lg text-gray-500 border-gray-100 dark:text-gray-400 dark:border-gray-700" id="documents-styled-tab" data-tabs-target="#styled-documents" type="button" role="tab" aria-controls="documents" aria-selected="false">Documents</button>
</li>
<li class="me-2" role="presentation">
    <button id="folder-button" class="inline-block p-4 border-b-2 rounded-t-lg text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500" id="folders-styled-tab" data-tabs-target="#styled-folders" type="button" role="tab" aria-controls="folders" aria-selected="true">Folders</button>
</li>

修改Tab内容部分： #

<div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="styled-documents" role="tabpanel" aria-labelledby="documents-tab">
    <!-- Documents内容 -->
</div>
<div class="p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="styled-folders" role="tabpanel" aria-labelledby="folders-tab">
    <h4>Folders</h4>
</div>

各方法对比： #

• 方法一：遵循Flowbite组件规范，保留所有原生交互（如点击切换），推荐使用。
• 方法二：灵活性高，适合需要额外自定义逻辑的场景，但需要手动维护类和属性的一致性。
• 方法三：最简单，无需JavaScript，适合静态默认状态的需求。

内容的提问来源于stack exchange，提问作者randy