如何利用URL中的锚点(#)控制HTML元素的显示与隐藏？

当然可以实现这个需求！这是一个非常实用的交互场景，用JavaScript就能轻松搞定。下面是具体的实现思路和完整代码示例：

核心实现逻辑 #

1. 获取URL中#后面的锚点内容
2. 根据锚点值匹配页面中对应id的元素
3. 移除该元素的hiddenfile类，让它从隐藏状态变为可见
4. 额外优化：监听浏览器的hashchange事件，支持用户通过前进/后退按钮切换锚点时，同步更新显示的内容

完整代码示例 #

<html>
<head>
    <style>
        .hiddenfile {
            opacity: 0;
            visibility: hidden;
            display: none;
        }
    </style>
</head>
<body>
    <div id="SOMETHING" class="SOMETHING hiddenfile" name="SOMETHING">这是SOMETHING的内容</div>
    <div id="SOMETHING2" class="SOMETHING2 hiddenfile" name="SOMETHING2">这是SOMETHING2的内容</div>
    <div id="SOMETHING3" class="SOMETHING3 hiddenfile" name="SOMETHING3">这是SOMETHING3的内容</div>

    <script>
        // 定义处理锚点的通用函数
        function handleHashChange() {
            // 提取锚点值，去掉开头的#符号
            const targetId = window.location.hash.slice(1);
            
            if (targetId) {
                // 根据id找到目标元素
                const targetDiv = document.getElementById(targetId);
                if (targetDiv) {
                    // 移除隐藏类，显示元素
                    targetDiv.classList.remove('hiddenfile');
                }
            }
        }

        // 页面加载完成时执行一次，处理初始锚点
        window.addEventListener('load', handleHashChange);
        // 监听锚点变化事件，支持浏览器前进/后退切换
        window.addEventListener('hashchange', handleHashChange);
    </script>
</body>
</html>

额外优化建议 #

• 大小写匹配问题：锚点值和元素id是严格区分大小写的，如果需要忽略大小写，可以在获取锚点后统一转成小写，查找元素时也做同样处理。
• 切换锚点时重置状态：如果希望每次切换锚点时，先隐藏之前显示的div，再显示新的目标div，可以修改handleHashChange函数，先遍历所有目标div添加hiddenfile类，再移除当前锚点元素的类，示例如下：

function handleHashChange() {
    const targetId = window.location.hash.slice(1);
    
    // 先隐藏所有目标div
    const allTargetDivs = document.querySelectorAll('[id^="SOMETHING"]');
    allTargetDivs.forEach(div => {
        div.classList.add('hiddenfile');
    });
    
    // 再显示对应锚点的div
    if (targetId) {
        const targetDiv = document.getElementById(targetId);
        if (targetDiv) {
            targetDiv.classList.remove('hiddenfile');
        }
    }
}

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