如何直接链接到母页中动态加载的指定内容板块？

核心思路 #

通过监听URL的哈希值（#后面的部分），在页面加载时自动根据哈希值加载对应的内容板块，同时保持URL与当前展示内容的同步。

具体实现步骤 #

1. 页面初始化时检测哈希值
   页面加载完成后，读取地址栏的哈希值，根据值加载对应内容：

   $(document).ready(function() {
       // 提取哈希值（去掉开头的#）
       const currentHash = window.location.hash.slice(1);
       
       // 根据哈希值匹配对应内容
       switch(currentHash) {
           case 'pictures':
               changecontent(1); // 加载图片板块
               break;
           // 可添加其他板块的匹配规则
           // case 'videos':
           //     changecontent(2);
           //     break;
       }
   });
   

2. 修改链接点击逻辑，同步更新哈希值
   不用return true让浏览器默认跳转，而是手动更新URL哈希值，同时阻止默认锚点跳转：

   <a href="#pictures" onclick="changecontent(1); updateHash('pictures'); return false;">click for pictures</a>
   

   对应的updateHash函数：

   function updateHash(hashStr) {
       // 用pushState更新哈希，不触发页面刷新
       window.history.pushState({}, document.title, `#${hashStr}`);
   }
   

3. 处理浏览器前进后退事件
   监听popstate事件，确保用户点击前进/后退时，内容能同步切换：

   window.addEventListener('popstate', () => {
       const currentHash = window.location.hash.slice(1);
       switch(currentHash) {
           case 'pictures':
               changecontent(1);
               break;
           // 其他板块规则
       }
   });
   

说明 #

• 直接在地址栏输入https://mywebsite.com/#pictures时，页面加载会自动触发哈希检测，调用changecontent(1)加载图片内容。
• 点击链接时，pushState会更新URL但不刷新页面，同时内容已通过changecontent切换，保证URL与内容一致。
• 监听popstate事件是为了覆盖浏览器前进后退的场景，避免内容与URL脱节。

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