点击a.html按钮跳转至b.html并显示指定图层的实现方法咨询

当然可以实现！你提到的location.hash思路完全可行，本质就是通过URL的哈希值传递目标图层的标识，然后在跳转后的页面根据这个哈希值来控制图层的显示状态。我给你写个完整的可运行示例，一看就明白：

页面A（a.html）：触发跳转的页面 #

这里的按钮点击后，会带着目标图层的哈希值跳转到页面B：

<!DOCTYPE html>
<html>
<head>
    <title>页面A</title>
</head>
<body>
    <h1>页面A</h1>
    <button id="jumpToTargetBtn">跳转到页面B并显示指定图层</button>

    <script>
        // 给按钮绑定点击事件
        document.getElementById('jumpToTargetBtn').addEventListener('click', () => {
            // 用hash传递目标图层的ID，这里是"target-layer"
            window.location.href = 'b.html#target-layer';
        });
    </script>
</body>
</html>

页面B（b.html）：接收并显示目标图层的页面 #

这里我们预设几个图层，默认只显示默认图层；页面加载或哈希值变化时，根据URL的hash来切换显示指定图层：

<!DOCTYPE html>
<html>
<head>
    <title>页面B</title>
    <style>
        /* 默认隐藏所有图层 */
        .layer {
            display: none;
            padding: 20px;
            margin: 15px 0;
            border-radius: 8px;
            border: 1px solid #ddd;
        }
        /* 激活状态的图层显示出来 */
        .layer.active {
            display: block;
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
    <h1>页面B</h1>

    <!-- 多个测试图层 -->
    <div id="default-layer" class="layer active">
        <h2>默认图层</h2>
        <p>这是页面B打开时的默认内容</p>
    </div>

    <div id="target-layer" class="layer">
        <h2>目标图层</h2>
        <p>🎉 这是从页面A跳转过来后要显示的内容！</p>
    </div>

    <div id="another-layer" class="layer">
        <h2>其他图层</h2>
        <p>这是另一个可选的图层</p>
    </div>

    <script>
        // 核心函数：根据hash切换图层
        function switchLayerByHash() {
            // 提取hash值，去掉开头的#号
            const targetLayerId = window.location.hash.slice(1);
            
            // 如果有有效目标ID
            if (targetLayerId && document.getElementById(targetLayerId)) {
                // 先隐藏所有图层
                document.querySelectorAll('.layer').forEach(layer => {
                    layer.classList.remove('active');
                });
                // 显示目标图层
                document.getElementById(targetLayerId).classList.add('active');
            } else {
                // 没有有效hash时，回到默认图层
                document.getElementById('default-layer').classList.add('active');
            }
        }

        // 页面加载完成时执行一次
        document.addEventListener('DOMContentLoaded', switchLayerByHash);
        // 监听hash变化（比如用户手动修改URL的hash）
        window.addEventListener('hashchange', switchLayerByHash);
    </script>
</body>
</html>

额外说明 #

1. 原理：通过URL的hash（即#后面的部分）传递目标图层的唯一标识，页面B读取这个标识后控制DOM元素的显示状态。
2. 扩展性：如果需要传递更复杂的参数，可以改用URL的查询参数（比如b.html?layer=target-layer），然后用new URLSearchParams(window.location.search).get('layer')来获取值，不过hash方式更适合这种锚点式的场景。
3. 注意事项：确保页面B中图层的ID和传递的hash值完全匹配（大小写敏感），否则会找不到目标元素。

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