如何用HTML/CSS/原生JS实现单页面依据URL锚点仅展示对应指定内容

实现原理 #

• 利用URL携带的锚点（hash）作为内容匹配标识
• 所有待切换内容默认设置为隐藏状态
• 页面加载时读取当前URL的锚点值，匹配对应id的内容块并设置为显示状态
• 增加锚点变更监听，支持页面内动态切换内容的场景

infopage.html完整代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>信息展示页</title>
    <style>
        /* 所有内容块默认隐藏 */
        .info-content {
            display: none;
            padding: 20px;
            border: 1px solid #eee;
            border-radius: 4px;
            margin: 20px 0;
        }
        /* 匹配到锚点的内容块显示样式 */
        .info-content.active {
            display: block;
        }
        /* 兜底提示样式 */
        .default-tip {
            padding: 20px;
            color: #666;
        }
    </style>
</head>
<body>
    <!-- 内容A 对应锚点#content-a，page1跳转后显示 -->
    <div id="content-a" class="info-content">
        <h2>内容A</h2>
        <p>这是page1跳转后展示的专属内容</p>
    </div>

    <!-- 内容B 对应锚点#content-b，page2跳转后显示 -->
    <div id="content-b" class="info-content">
        <h2>内容B</h2>
        <p>这是page2跳转后展示的专属内容</p>
    </div>

    <!-- 内容C 对应锚点#content-c，page3跳转后显示 -->
    <div id="content-c" class="info-content">
        <h2>内容C</h2>
        <p>这是page3跳转后展示的专属内容</p>
    </div>

    <!-- 兜底内容：无锚点/锚点不匹配时显示 -->
    <div class="default-tip" id="defaultContent">
        <h2>暂无匹配内容</h2>
        <p>请检查跳转链接是否正确</p>
    </div>

    <script>
        function showMatchContent() {
            // 提取锚点值，去掉开头的#
            const hash = window.location.hash.slice(1);
            const allContent = document.querySelectorAll('.info-content');
            const defaultContent = document.getElementById('defaultContent');

            // 先重置所有内容状态
            allContent.forEach(item => item.classList.remove('active'));
            defaultContent.style.display = 'none';

            // 无锚点时直接显示兜底内容
            if(!hash) {
                defaultContent.style.display = 'block';
                return;
            }

            // 查找锚点匹配的内容块
            const targetContent = document.getElementById(hash);
            if(targetContent && targetContent.classList.contains('info-content')) {
                targetContent.classList.add('active');
                // 可选：自动滚动到内容块位置
                targetContent.scrollIntoView();
            } else {
                // 未匹配到内容显示兜底提示
                defaultContent.style.display = 'block';
            }
        }

        // 页面加载完成后执行匹配逻辑
        document.addEventListener('DOMContentLoaded', showMatchContent);
        // 监听锚点变化，支持页面内动态切换内容
        window.addEventListener('hashchange', showMatchContent);
    </script>
</body>
</html>

外部页面跳转方式 #

其他页面的跳转链接直接拼接对应内容的id作为锚点即可：

• page1跳转链接：<a href="infopage.html#content-a">跳转到内容A</a>
• page2跳转链接：<a href="infopage.html#content-b">跳转到内容B</a>
• page3跳转链接：<a href="infopage.html#content-c">跳转到内容C</a>

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