本文介绍如何通过 jQuery 初始化时读取 URL hash 并触发下拉框 change 事件，使 example.com/#theme1 等书签链接能正确显示对应内容，解决页面刷新或直接访问带 hash 的 URL 时内容不生效的问题。
本文介绍如何通过 jquery 初始化时读取 url hash 并触发下拉框 change 事件，使 `example.com/#theme1` 等书签链接能正确显示对应内容，解决页面刷新或直接访问带 hash 的 url 时内容不生效的问题。
在使用下拉选择器（
原代码的核心问题在于：仅监听了 change 事件，却未在页面加载时主动解析当前 URL hash 并模拟一次选择行为。因此，即使地址栏已有 #theme1，change 回调也不会执行，导致 .blockcontent 全部可见、主题区块未按需显示。
✅ 正确解决方案：初始化时主动触发 change
关键步骤有三：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
- 读取初始 hash：使用 $(location).attr('hash') 获取当前 URL 中的 hash 字符串（如 #theme1）；
- 校验并清洗 hash：检查 hash 是否存在且非空，并用 .replace('#', '') 移除开头的 #；
- 定位并选中对应 option，再触发 change：通过属性选择器找到
以下是优化后的完整 jQuery 初始化代码（已兼容 jQuery 3.x）：
jQuery(document).ready(function($) {
// 1️⃣ 监听下拉框 change：更新 hash 并同步显示内容
$("#theme-selector").change(function() {
var selectedValue = $(this).val(); // 更简洁：用 $(this) 替代 document.getElementById
window.location.hash = selectedValue;
// 显示对应主题内容，隐藏其他
var themeclass = selectedValue;
$('.blockcontent').hide();
$('.' + themeclass).show();
$('.theme-header').hide();
$('.' + themeclass).show();
});
// 2️⃣ 页面加载时：读取当前 hash 并模拟一次 change 触发（核心修复）
var initialHash = $(location).attr('hash');
if (initialHash && initialHash.trim() !== '') {
var cleanHash = initialHash.replace('#', '');
// 精准匹配 option 的 value，并设为选中 + 触发事件
$("#theme-selector option[value='" + cleanHash + "']")
.prop("selected", true)
.trigger("change");
}
});
⚠️ 注意事项与最佳实践
- 事件注册顺序很重要：change 回调必须在 .trigger('change') 之前定义，否则触发无效；
- 避免重复绑定：本例中两个 change 回调被合并为单个函数，提升可维护性与性能；
- value 值需严格匹配 class 名：确保
