通过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>