如何在页面重载后保持Tailwind CSS+Midone组件的当前标签页激活？

问题背景 #

使用基于Tailwind CSS的Midone组件标签页，需要实现用户提交数据触发页面重载后，仍保持之前选中的标签页状态。现有标签页代码如下：

<div class="mt-10 w-full box">
    <div class="p-2">
        <ul class="nav nav-link-tabs" role="tablist" id="myTab">
            <li id="tab-products-li" class="nav-item flex-1" role="presentation">
                <button class="nav-link w-full py-2 active"
                        data-tw-toggle="pill"
                        data-tw-target="#tab-products"
                        type="button"
                        role="tab" aria-controls="example-tab-3" aria-selected="true"><i class="fa-solid fa-boxes-stacked h-4 w-4 mr-2"></i>Produk
                </button>
            </li>
            <li id="tab-stores-li" class="nav-item flex-1" role="presentation">
                <button class="nav-link w-full py-2"
                        data-tw-toggle="pill"
                        data-tw-target="#tab-stores"
                        type="button"
                        role="tab" aria-controls="example-tab-4" aria-selected="false"><i class="fa-solid fa-store h-4 w-4 mr-2"></i>Lapak
                </button>
            </li>
        </ul>
        <div class="tab-content mt-5">
            <div id="tab-products" class="tab-pane leading-relaxed active" role="tabpanel"
                 aria-labelledby="example-3-tab">
                <div class="overflow-x-auto">
                    tab 1
                </div>
            </div>
            <div id="tab-stores" class="tab-pane leading-relaxed" role="tabpanel"
                 aria-labelledby="example-3-tab">
                <div class="overflow-x-auto">
                    tab 2
                </div>
            </div>
        </div>
    </div>
</div>

实现方案 #

1. 监听标签切换，保存选中状态到本地存储 #

利用Midone提供的show.tw.tab事件，在用户切换标签时，将当前选中的标签ID存入localStorage：

const tabContainer = document.getElementById('myTab');

tabContainer.addEventListener('show.tw.tab', function(event) {
    const activeTabId = event.target.getAttribute('data-tw-target');
    localStorage.setItem('activeMidoneTab', activeTabId);
});

2. 页面加载时恢复标签选中状态 #

页面重载完成后，读取本地存储中保存的标签ID，调用Midone的Tab实例方法切换到对应标签：

document.addEventListener('DOMContentLoaded', function() {
    const savedTabId = localStorage.getItem('activeMidoneTab');
    
    if (savedTabId) {
        const tabInstance = tailwind.Tab.getOrCreateInstance(document.getElementById('myTab'));
        const targetTabButton = document.querySelector(`[data-tw-target="${savedTabId}"]`);
        tabInstance.show(targetTabButton);
    }
});

关键注意事项 #

• 修正了原HTML中<li>元素与<div class="tab-pane">元素ID重复的问题，避免DOM选择器冲突；
• 若需要会话级临时保存（关闭浏览器即失效），可将localStorage替换为sessionStorage；
• 若表单通过AJAX异步提交无需页面重载，可直接处理表单逻辑，无需上述本地存储操作。

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