如何在访问特定URL时触发指定函数？实现页面分类直达

核心思路 #

通过在URL中传递分类参数，页面加载时读取该参数，自动显示对应分类内容、隐藏其他分类，同时支持页面内的切换交互保持URL同步。

步骤1：修改首页跳转链接 #

首页中指向分类页面的链接，需要带上分类标识，格式如下：

<!-- 首页的Electrical分类链接 -->
<a href="your-classroom-page.html?category=Electrical">Electrical</a>
<!-- Mechanical分类链接 -->
<a href="your-classroom-page.html?category=Mechanical">Mechanical</a>
<!-- 其他分类同理替换category值 -->

your-classroom-page.html替换成你的分类页面文件名，category的值要和你代码中titles数组的分类名称完全一致（区分大小写）。

步骤2：给分类区块添加标识 #

修改你提供的renderArticleSections函数，给每个生成的分类section加上data-category属性，方便后续定位对应分类：

function renderArticleSections() {
    const titles = ["Electrical", "Mechanical", "Computer", "Chemical", "Biomedical"];
    // 替换原categoryLinks，改为带分类参数的链接
    const categoryLinks = titles.map(title => `${window.location.pathname}?category=${title}`);

    for (let i = 0; i < 5; i++) {
        const section = document.createElement("section");
        section.setAttribute("class", "articles-section");
        // 新增：给section添加分类标识
        section.setAttribute("data-category", titles[i]);

        const categoryWrapper = document.createElement("div");
        categoryWrapper.setAttribute("class", "articles-category-wrapper");
        const category = document.createElement("p");
        category.setAttribute("class", "articles-category");
        category.textContent = titles[i];

        const categoryLink = document.createElement("a");
        categoryLink.setAttribute("href", categoryLinks[i]);
        categoryLink.setAttribute("class", "category-link");
        categoryLink.textContent = "See All";

        categoryWrapper.append(category);
        category.after(document.createElement("hr"), categoryLink);

        section.append(categoryWrapper);
        categoryWrapper.after(createFiveArticlesWrapper(articlesData[i]));

        document.getElementById("classroom-title").before(section);
    }
}

这里同时替换了categoryLinks数组，让页面内的"See All"按钮点击后也能跳转到对应分类的状态。

步骤3：编写初始化分类逻辑 #

添加一个函数，在页面加载时读取URL参数，自动切换到目标分类：

function initActiveCategory() {
    // 解析URL中的查询参数
    const urlParams = new URLSearchParams(window.location.search);
    const targetCategory = urlParams.get('category');
    
    // 获取所有分类区块
    const allSections = document.querySelectorAll('.articles-section');

    if (targetCategory) {
        // 匹配目标分类，显示对应区块，隐藏其他
        let found = false;
        allSections.forEach(section => {
            if (section.dataset.category === targetCategory) {
                section.style.display = 'block';
                found = true;
            } else {
                section.style.display = 'none';
            }
        });
        // 如果URL参数中的分类不存在，默认显示第一个分类
        if (!found) {
            allSections[0].style.display = 'block';
            Array.from(allSections).slice(1).forEach(sec => sec.style.display = 'none');
        }
    } else {
        // 默认显示第一个分类（可根据需求改成显示全部）
        allSections.forEach((section, index) => {
            section.style.display = index === 0 ? 'block' : 'none';
        });
    }
}

步骤4：页面加载时执行初始化 #

在页面渲染完成后调用上述两个函数，确保先渲染区块再初始化分类：

// 页面加载完成后执行
window.addEventListener('DOMContentLoaded', () => {
    renderArticleSections();
    initActiveCategory();
});

（可选）优化手动切换交互 #

如果你的页面有手动切换分类的按钮，添加以下代码让切换时同步更新URL，刷新页面后仍保持当前分类：

// 假设切换按钮都有类名category-btn，且带data-category属性
function setupCategorySwitch() {
    document.querySelectorAll('.category-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const currentCategory = this.dataset.category;
            
            // 更新URL参数（不刷新页面）
            const urlParams = new URLSearchParams(window.location.search);
            urlParams.set('category', currentCategory);
            window.history.pushState({}, '', `${window.location.pathname}?${urlParams}`);
            
            // 切换分类显示
            document.querySelectorAll('.articles-section').forEach(section => {
                section.style.display = section.dataset.category === currentCategory ? 'block' : 'none';
            });
            
            // 高亮当前按钮（需提前定义.active样式）
            document.querySelectorAll('.category-btn').forEach(b => b.classList.remove('active'));
            this.classList.add('active');
        });
    });
}

// 把setupCategorySwitch也加到页面加载事件中
window.addEventListener('DOMContentLoaded', () => {
    renderArticleSections();
    initActiveCategory();
    setupCategorySwitch(); // 新增
});

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