如何将网站重复超链接设为变量实现批量更新？附HTML/JS/JQuery方案

嘿，这个场景我太懂了——每次要改同一个链接得翻遍N个页面，简直是重复劳动的噩梦！下面给你三种实打实的实现方法，分别对应HTML、原生JavaScript和jQuery，改一次变量就能让所有关联链接同步更新：

如果你的服务器支持SSI（比如Apache、Nginx默认都能开启），这是纯HTML层面最省心的方法，完全不需要前端脚本。

步骤很简单：

• 第一步，在你的HTML文件开头定义变量：

  <!--#set var="sharedLink" value="https://your-target-url.com" -->
  

• 第二步，在所有需要用这个链接的地方，直接引用变量：

  <a href="<!--#echo var="sharedLink" -->">点击跳转</a>
  <a href="<!--#echo var="sharedLink" -->">另一个跳转按钮</a>
  

• 最后，记得把HTML文件后缀改成.shtml（或者在服务器配置里让.html文件支持SSI），这样服务器会在返回页面之前把变量替换成真实URL。

注意：这个方法依赖服务器配置，静态HTML文件直接打开本地的话不会生效，必须部署到支持SSI的服务器上。

如果不想依赖服务器配置，用纯前端JS就能搞定，适合静态站点或者无法修改服务器设置的场景。

实现思路：先定义一个全局变量存储目标URL，然后批量修改所有标记过的链接的href属性。

步骤：

• 第一步，给所有需要同步的链接加一个统一的标记，比如自定义data属性或者类名，这里用data-shared-link：

  <a data-shared-link>首页跳转</a>
  <a data-shared-link>底部导航跳转</a>
  

• 第二步，在页面的<script>标签里定义变量并批量更新链接：

  // 定义全局变量，后续改这里就行
  const SHARED_URL = "https://your-target-url.com";
  
  // 找到所有标记过的链接，批量设置href
  document.querySelectorAll('a[data-shared-link]').forEach(link => {
    link.href = SHARED_URL;
    // 可选：如果需要设置target或者其他属性也可以在这里加
    // link.target = "_blank";
  });
  

优势：完全前端实现，不需要服务器支持，还能灵活添加其他属性，比如target="_blank"之类的。

如果你已经在用jQuery开发，这个方法会更简洁，代码量更少。

实现思路和原生JS类似，只是用jQuery的选择器和方法来简化操作：

步骤：

• 第一步，同样给目标链接加统一标记，比如类名shared-link：

  <a class="shared-link">产品页跳转</a>
  <a class="shared-link">侧边栏跳转</a>
  

• 第二步，用jQuery代码批量更新：

  // 定义变量
  var sharedUrl = "https://your-target-url.com";
  
  // 选择所有带类名的链接，设置href
  $('.shared-link').attr('href', sharedUrl);
  
  // 可选：如果要设置多个属性，用对象形式
  // $('.shared-link').attr({
  //   href: sharedUrl,
  //   target: "_blank"
  // });
  

优势：jQuery的选择器更灵活，代码更简洁，适合已经引入jQuery的项目。

内容的提问来源于stack exchange，提问作者NULL.Dude