本文介绍如何利用浏览器 url 的 hash 值（如 `#sprites`），在页面加载时自动匹配并选中 `
在构建多页静态网站时，常需通过链接锚点（如 page1.html#textures）跳转并高亮/激活对应内容模块。一个典型场景是：首页按钮带不同 hash 链接，点击后跳转至 page1.html，同时希望该页的下拉菜单（
实现原理非常简洁：
- 浏览器加载 page1.html 后，location.hash 可获取 URL 中 # 后的字符串（如 "#models"）；
- 使用 .substr(1) 去掉开头的 #，得到纯标识符（如 "models"）；
- 利用 document.querySelector('option[id="models"]') 精准定位目标
- 调用 setAttribute('selected', true) 设置其为默认选中项（注意：此操作会覆盖 HTML 中原有的 selected 属性，且兼容所有现代浏览器）。
✅ 正确的完整实现代码（请置于 page1.html 底部或 DOMContentLoaded 事件中）：
<script>
document.addEventListener('DOMContentLoaded', function() {
const hash = location.hash.substr(1);
if (hash) {
const targetOption = document.querySelector(`option[id="${hash}"]`);
if (targetOption) {
targetOption.setAttribute('selected', 'true');
// 可选：同步触发 onchange 事件（如需执行 changeResource()）
targetOption.closest('select').dispatchEvent(new Event('change', { bubbles: true }));
}
}
});
</script>⚠️ 注意事项：
- ID 唯一性与一致性：确保
- 执行时机：必须等 DOM 加载完成后再操作，否则 querySelector 可能返回 null；推荐使用 DOMContentLoaded 事件而非直接脚本放置（避免因 DOM 未就绪导致失败）；
- 表单逻辑联动：若下拉框绑定了 onchange="changeResource();"，单纯设置 selected 不会自动触发该函数。如需同步执行，请手动调用 dispatchEvent('change')（如上例所示）；
- 健壮性增强：添加 if (hash) 和 if (targetOption) 判断，避免无 hash 或 ID 不匹配时抛出错误。
通过这一方法，无需后端支持或复杂框架，即可实现轻量、可靠、语义清晰的前端锚点驱动交互，大幅提升静态资源页面的用户体验与可维护性。
