Tab Filter：如何获取静态URL，实现外部URL直接打开指定标签页

一、改造链接生成静态URL #

把原代码中javascript:void(0)的占位链接，替换为带筛选参数的静态URL，让每个Tab拥有可直接分享的独立地址：

<ul class="filters" data-bs-toggle="buttons">
    <li class="btn active">
        <input type="radio" name="filter">
        <a href="?filter=All">All Tests</a> 
    </li>
    <li data-filter=".General" class="btn">
        <input type="radio" name="filter" id="general">
        <a href="?filter=General">General</a> 
    </li>
    <li data-filter=".Business" class="btn">
        <input type="radio" name="filter">
        <a href="?filter=Business">Premium</a> 
    </li>
</ul>

二、页面加载自动解析URL激活对应Tab #

添加以下JavaScript代码，实现页面加载时读取URL参数，自动激活目标Tab并筛选对应内容：

document.addEventListener('DOMContentLoaded', function() {
    // 获取URL中的筛选参数
    const urlParams = new URLSearchParams(window.location.search);
    const targetFilter = urlParams.get('filter');

    if (!targetFilter) return; // 无参数时默认显示全部

    // 移除所有Tab的激活状态
    document.querySelectorAll('.filters .btn').forEach(btn => {
        btn.classList.remove('active');
        btn.querySelector('input').checked = false;
    });

    if (targetFilter === 'All') {
        // 激活"全部测试"Tab并显示所有内容
        const allBtn = document.querySelector('.filters .btn:first-child');
        allBtn.classList.add('active');
        allBtn.querySelector('input').checked = true;
        document.querySelectorAll('[class*="General"], [class*="Business"]').forEach(item => {
            item.style.display = 'block';
        });
    } else {
        // 激活目标Tab并筛选显示对应内容
        const targetBtn = document.querySelector(`.filters .btn[data-filter=".${targetFilter}"]`);
        if (targetBtn) {
            targetBtn.classList.add('active');
            targetBtn.querySelector('input').checked = true;
            document.querySelectorAll('[class*="General"], [class*="Business"]').forEach(item => {
                item.style.display = item.classList.contains(targetFilter) ? 'block' : 'none';
            });
        }
    }
});

三、静态URL示例 #

• 打开全部测试：你的页面地址?filter=All
• 打开General分类：你的页面地址?filter=General
• 打开Premium（Business）分类：你的页面地址?filter=Business

如果你的筛选逻辑依赖第三方插件（如Isotope），只需替换代码中显示/隐藏内容的部分为插件对应的筛选方法即可。

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