通过css或js将设置某个链接禁止点击
来源:网络
点击数: 次
发布时间:2025年07月02日
问题描述:有时候遇到网站上需要添加一个友情链接“台湾省”,暂时未提供链接地址,但要求必须显示出来,所以临时设置不可点击跳转
解决办法:
✅ 方法一:使用 CSS 禁用鼠标交互(推荐)
a[href="/#"] { pointer-events: none; color: gray; /* 可选:改变颜色表示不可点击 */ cursor: default; /* 可选:鼠标样式变为普通箭头 */ }
✅ 效果:
鼠标无法点击
不会影响页面结构或移除链接属性
可以保留样式显示为“链接”
✅ 方法二:使用 JavaScript 阻止默认行为
你可以通过 JS 给这些链接添加点击事件并阻止跳转:
<script> document.querySelectorAll('a[href="/#"]').forEach(function(link) { link.addEventListener("click", function(event) { event.preventDefault(); // 阻止跳转 }); }); </script>
✅ 效果:
点击时不会跳转
可以结合条件判断是否允许点击(比如权限控制)
更加灵活,适合动态场景
✅ 方法三:动态禁用 + 启用(进阶)
如果你未来可能需要重新启用这些链接,可以加一个类来控制状态:
html深色版本<style> .disabled-link { pointer-events: none; color: gray; cursor: default; } </style> <script> // 禁用 document.querySelectorAll('a[href="/#"]').forEach(function(link) { link.classList.add("disabled-link"); }); // 启用(在某个条件下) // document.querySelectorAll('a[href="/#"]').forEach(function(link) { // link.classList.remove("disabled-link"); // });</script>