如何通过HTML链接打开页面中的指定标签页？

一、生成带指定标签的跳转链接 #

直接在你的 portfolio 页面 URL 后追加 ?filter=标签标识 即可，对应每个标签的具体链接如下：

• 全部作品：https://thebrandchimp.com/portfolio.php?filter=all
• 摄影：https://thebrandchimp.com/portfolio.php?filter=photography
• 平面设计：https://thebrandchimp.com/portfolio.php?filter=logos
• 社交媒体：https://thebrandchimp.com/portfolio.php?filter=socialmedia
• 室内设计：https://thebrandchimp.com/portfolio.php?filter=interiordesign
• 网站：https://thebrandchimp.com/portfolio.php?filter=websites

二、在 portfolio.php 页面添加处理逻辑 #

需要加入一段 JavaScript 代码，让页面加载时自动读取 URL 参数，激活对应标签并触发过滤动作：

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 获取URL中的filter参数
    const urlParams = new URLSearchParams(window.location.search);
    const targetFilter = urlParams.get('filter');
    
    if (targetFilter) {
        // 匹配对应data-filter属性的标签项
        const targetTab = document.querySelector(`li[data-filter=".${targetFilter}"]`);
        
        if (targetTab) {
            // 移除所有标签的active类
            document.querySelectorAll('.portfolio-nav li').forEach(tab => {
                tab.classList.remove('active');
            });
            // 给目标标签添加active类
            targetTab.classList.add('active');
            
            // 触发标签点击事件（和用户手动点击效果一致）
            targetTab.click();
        }
    }
});

补充说明 #

如果你的作品过滤逻辑不是通过点击标签触发，而是有单独的处理函数（比如 filterItems(filterClass)），可以把代码里的 targetTab.click() 替换成对应函数调用，例如 filterItems(".${targetFilter}")。

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