如何通过点击锚链接实现以business开头的div显隐切换

需求回顾 #

• 页面加载时，所有ID以business开头的DIV默认隐藏
• 点击顶部对应锚链接时，仅显示目标DIV，其余隐藏
• 仅允许修改DIV的ID或运行脚本，保留现有HTML结构，支持非技术人员自由增删按钮

原有方案问题分析 #

1. CSS属性选择器方案：div[id^="business"]:target只能匹配当前URL哈希对应的元素，但切换锚链接时，之前显示的DIV不会自动隐藏，必须刷新页面才能重置，不符合需求。
2. 硬编码jQuery方案：代码里写死了固定选择器，非技术人员增删按钮后需要修改脚本，无法适配动态变化的场景。

正确解决方案 #

纯JavaScript版本（无依赖） #

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
    // 获取所有ID以business开头的DIV
    const businessDivs = document.querySelectorAll('div[id^="business"]');
    // 初始全部隐藏
    businessDivs.forEach(div => div.style.display = 'none');

    // 绑定所有指向business类DIV的锚链接点击事件
    document.querySelectorAll('a[href^="#business"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault(); // 可选：阻止URL哈希变化，如需保留哈希可删除此行
            const targetId = this.href.split('#')[1];
            // 先隐藏所有目标DIV
            businessDivs.forEach(div => div.style.display = 'none');
            // 显示点击对应的DIV
            document.getElementById(targetId).style.display = 'block';
        });
    });

    // 处理页面加载时的URL哈希（若有直接显示对应DIV）
    const hash = window.location.hash.slice(1);
    if (hash.startsWith('business') && document.getElementById(hash)) {
        businessDivs.forEach(div => div.style.display = 'none');
        document.getElementById(hash).style.display = 'block';
    }
});

jQuery版本 #

$(document).ready(function() {
    // 初始隐藏所有business开头的DIV
    $('div[id^="business"]').hide();

    // 绑定锚链接点击事件
    $('a[href^="#business"]').click(function(e) {
        e.preventDefault(); // 可选：阻止URL哈希变化
        const targetId = $(this).attr('href').substring(1);
        // 批量隐藏+显示目标
        $('div[id^="business"]').hide();
        $('#' + targetId).show();
    });

    // 处理初始URL哈希
    const hash = window.location.hash.substring(1);
    if (hash.startsWith('business') && $('#' + hash).length) {
        $('div[id^="business"]').hide();
        $('#' + hash).show();
    }
});

使用注意事项 #

• 确保锚链接的href属性与目标DIV的ID完全对应，比如<a href="#business_operation">运营业务</a>对应<div id="business_operation">...</div>
• 如果希望刷新页面后保持当前显示的DIV，删除代码中的e.preventDefault()即可，此时URL会同步更新哈希值
• 非技术人员增删按钮时，只要遵循“锚链接href指向对应DIV的ID（均以business开头）”的规则，无需修改脚本

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