移动端菜单开发：无插件实现HTML带静态查询字符串的动态URL

嘿，刚好碰到过类似的需求，先给你明确说：纯HTML里直接写href= {link} + "ID=7"是行不通的——因为HTML是静态标记语言，不支持这种变量拼接的语法。不过完全可以用原生JavaScript搞定，不用任何插件，给你几个实用的方案：

方案1：批量处理菜单链接（推荐） #

如果是移动端菜单的多个链接，建议把基础URL存在HTML的data-*属性里，再用JS统一拼接：

<!-- 菜单链接示例 -->
<a class="menu-link" data-base="/products">产品详情</a>
<a class="menu-link" data-base="/categories">分类导航</a>

然后写一段原生JS来处理：

// 等DOM加载完成再执行（避免找不到元素）
document.addEventListener('DOMContentLoaded', () => {
  // 获取所有需要处理的菜单链接
  const menuLinks = document.querySelectorAll('.menu-link');
  
  menuLinks.forEach(link => {
    // 取出基础URL
    const baseUrl = link.dataset.base;
    // 拼接静态查询字符串，这里用模板字符串更直观
    link.href = `${baseUrl}?ID=7`;
  });
});

这种方式把数据和逻辑分开，后续要修改查询参数或者基础URL都很方便。

方案2：单个链接的简化处理 #

如果只是单个需要动态拼接的链接，直接定位元素修改就行：

<a id="single-menu-link" href="#">我的收藏</a>

document.addEventListener('DOMContentLoaded', () => {
  const targetLink = document.getElementById('single-menu-link');
  const baseUrl = '/favorites';
  targetLink.href = `${baseUrl}?ID=7`;
});

方案3：更稳妥的参数拼接（避免URL错误） #

如果你的基础URL本身可能已经带有其他查询参数（比如/products?type=electronics），直接加?ID=7会导致参数冲突，这时候用URLSearchParams来处理更稳妥：

// 假设baseUrl是带参数的
const baseUrl = '/products?type=electronics';
const url = new URL(baseUrl);
// 添加静态参数ID=7
url.searchParams.append('ID', '7');
// 最终URL会变成 /products?type=electronics&ID=7
link.href = url.toString();

这个API会自动处理参数之间的连接符，不用你手动判断是加?还是&。

小提醒 #

一定要确保JS代码在DOM加载完成后执行，不然会找不到页面上的链接元素——上面的例子都用了DOMContentLoaded事件，就是干这个的。

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