代码无执行效果：如何仅用HTML实现URL哈希联动页面标题更新

首先，你没贴出原来的代码，但常见的失效原因大概率是没监听哈希变化事件，或者获取哈希值的逻辑有误，又或者没处理页面初始加载时的哈希状态。不过放心，只用纯前端JavaScript就能搞定，完全不需要PHP，下面给你完整的解决方案：

实现思路 #

• 先获取页面原本的标题（也就是你说的example）
• 监听hashchange事件，当URL的哈希部分变化时触发标题更新逻辑
• 页面加载完成时也要检查一次哈希，避免直接打开带哈希的URL时标题不更新

完整代码示例 #

把这段代码放在你的index.html里，建议放在</body>标签之前的<script>标签中：

// 获取页面原始标题，比如"example"
const originalTitle = document.title;

// 定义更新标题的核心函数
function updateTitleFromHash() {
    // 提取哈希值，去掉开头的#符号
    const cityName = window.location.hash.slice(1);
    if (cityName) {
        // 有哈希值时，拼接新标题
        document.title = `${originalTitle} ${cityName}`;
    } else {
        // 没有哈希值时，恢复原始标题
        document.title = originalTitle;
    }
}

// 页面加载完成后执行一次，处理初始哈希状态
window.addEventListener('DOMContentLoaded', updateTitleFromHash);

// 监听哈希变化事件，实时更新标题
window.addEventListener('hashchange', updateTitleFromHash);

代码说明 #

• window.location.hash会获取URL中#及后面的内容，比如example.com/#city1对应的就是#city1，用.slice(1)就能去掉开头的#得到city1
• DOMContentLoaded事件确保页面完全加载后再执行，避免获取不到原始标题
• hashchange事件会在用户点击浏览器前进/后退按钮、手动修改URL哈希时自动触发，实现实时更新

这样设置后，打开example.com/#city1时标题会变成example city1，打开example.com/#city2时变成example city2，没有哈希时则恢复成原始标题example。

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