如何获取页面指定URL赋值给导航菜单项，实现点击跳转至用户专属资源

方案1：JS获取页面现有URL赋值给导航栏 #

该方案不需要修改现有服务端代码，直接在前端生效，支持页面加载自动赋值或者点击时动态获取两种实现：

版本1：页面加载完成自动赋值 #

// 等待DOM全部加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 获取页面上的专属资源URL：匹配h1.title标签后紧跟着的a链接
    const rateLinkEl = document.querySelector('h1.title + a[href]');
    if (!rateLinkEl) return;
    const uniquePdfUrl = rateLinkEl.getAttribute('href');
    
    // 匹配导航栏的Rates & info链接
    const navRateEl = document.querySelector('a.menulinks[href="**UNIQUE VARIABLE TARGET**"]');
    // 如果按href匹配不到，可以用文本内容匹配，替换上面一行代码即可：
    // const navRateEl = Array.from(document.querySelectorAll('a.menulinks')).find(el => el.textContent.trim() === 'Rates & info');
    if (navRateEl) {
        navRateEl.setAttribute('href', uniquePdfUrl);
    }
});

版本2：点击时动态获取（符合onclick实现要求） #

document.addEventListener('DOMContentLoaded', function() {
    const navRateEl = document.querySelector('a.menulinks[href="**UNIQUE VARIABLE TARGET**"]');
    if (!navRateEl) return;
    
    navRateEl.addEventListener('click', function(e) {
        e.preventDefault(); // 阻止默认跳转行为
        const rateLinkEl = document.querySelector('h1.title + a[href]');
        if (rateLinkEl) {
            // 新窗口打开用户专属PDF
            window.open(rateLinkEl.getAttribute('href'), '_blank');
        }
    });
});

使用方法 #

将上面任意一段代码放到页面</body>标签之前即可生效。

方案2：服务端直接渲染关联（更稳定推荐） #

如果你有权限修改服务端代码，这个方案比前端JS更可靠，不会因为DOM结构变动、JS加载失败导致跳转失效，操作逻辑如下：

1. 服务端接收到页面请求后，从登录会话中获取当前用户的专属识别编码
2. 从SQL数据库查询对应用户绑定的PDF资源URL
3. 渲染导航栏代码时，直接将查询到的URL替换掉导航栏href属性中的**UNIQUE VARIABLE TARGET**占位符即可

如果你的站点用的是aspx后端（从现有页面后缀判断），可以直接用嵌入式代码实现：

<li style="">
    <a class="menulinks" style="" href="<%= 当前用户专属PDF的变量名 %>" target="_blank">
        Rates &amp; info
    </a>
</li>

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