如何在用户处于对应页面时让页脚导航链接不可点击？

首先修正你的样式写法，类选择器需要添加.才能生效：

.user_on_it {
  pointer-events: none;
  /* 可以额外加视觉提示，比如变灰、取消下划线 */
  color: #999;
  text-decoration: none;
  cursor: default;
}

一、纯前端JavaScript方案（适合静态页面/前端路由） #

核心逻辑是对比当前页面的URL路径与导航链接的href，匹配时给对应链接添加禁用类。

假设你的页脚导航结构如下：

<footer>
  <ul class="footer-nav">
    <li><a href="/home.html">首页</a></li>
    <li><a href="/about.html">关于我们</a></li>
    <li><a href="/contact.html">联系我们</a></li>
  </ul>
</footer>

添加以下JS代码实现判断：

// 获取所有导航链接
const navLinks = document.querySelectorAll('.footer-nav a');
// 获取当前页面的路径（比如 "/about.html"）
const currentPath = window.location.pathname;

// 遍历每个链接做匹配
navLinks.forEach(link => {
  // 统一处理绝对/相对路径，提取链接的路径部分
  const linkPath = new URL(link.href).pathname;
  // 路径完全匹配时添加禁用类
  if (linkPath === currentPath) {
    link.classList.add('user_on_it');
  }
});

如果是Vue/React这类前端路由框架，可以直接通过当前路由名称判断，比如Vue中在mounted钩子内对比$route.name与链接对应的路由标识，再给元素加类。

二、服务端渲染方案（适合动态页面） #

如果你的页面由后端渲染（比如PHP、Node.js、Python框架），可以直接在后端判断当前页面，给对应链接直接添加禁用类，无需前端JS介入。

举个PHP的示例：

<footer>
  <ul class="footer-nav">
    <li><a href="/home.php" <?php if($_SERVER['PHP_SELF'] == '/home.php') echo 'class="user_on_it"' ?>>首页</a></li>
    <li><a href="/about.php" <?php if($_SERVER['PHP_SELF'] == '/about.php') echo 'class="user_on_it"' ?>>关于我们</a></li>
    <li><a href="/contact.php" <?php if($_SERVER['PHP_SELF'] == '/contact.php') echo 'class="user_on_it"' ?>>联系我们</a></li>
  </ul>
</footer>

Node.js EJS模板示例：

<footer>
  <ul class="footer-nav">
    <li><a href="/home" class="<%= currentPage === 'home' ? 'user_on_it' : '' %>">首页</a></li>
    <li><a href="/about" class="<%= currentPage === 'about' ? 'user_on_it' : '' %>">关于我们</a></li>
  </ul>
</footer>

后端渲染时，只需把currentPage变量（对应当前页面标识）传入模板即可。

补充说明 #

你之前尝试的::before/::after伪元素无法实现这个需求，因为伪元素只是CSS层面的样式扩展，无法获取当前页面的URL信息，根本做不了页面匹配的逻辑判断，必须用JS或服务端代码完成这部分逻辑。

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