How To Disable A HTML Anchor Tag

Trang chủ » Html A Tag Disabled » How To Disable A HTML Anchor Tag

Có thể bạn quan tâm

Table of Contents

  1. Disable HTML Anchor Tag with CSS
  2. Disable HTML Anchor Tag with JavaScript
  3. Conclusion

In this post, we'll learn how to disable a HTML anchor tag using CSS or inline JavaScript.

Disable HTML Anchor Tag with CSS

The best way to disable a link tag is by using the CSS property pointer-events: none;. When you apply pointer-events: none; to any element, all click events will be disabled.

Because it applies to any element, you can use it to disable an anchor tag.

Here's how to use pointer-events: none; inline to disable a link tag:

HTML<a href="https://sabe.io" style="pointer-events: none;">Sabe.io</a>

Alternatively, you can use CSS classes and separate the CSS:

HTML<style> .disable-link { pointer-events: none; } </style> <a href="https://sabe.io" class="disable-link">Sabe.io</a>

By using a CSS class, you can disable multiple anchor tags at once.

If you really wanted to, you could even disable all anchor tags on a page by targeting the a tag:

HTML<style> a { pointer-events: none; } </style> <a href="https://sabe.io">Sabe.io</a>

Be careful with this technique as it can have unintended consequences!

Disable HTML Anchor Tag with JavaScript

If you don't want to use CSS, you can also disable a link tag by using inline JavaScript.

Here's an example of a link that is disabled using JavaScript:

HTML<a href="javascript:void(0)">Sabe.io</a>

If you try clicking on this link, it won't work, thereby disabling the link.

While this works, the best way to disable a link tag is to use CSS.

Conclusion

We've seen how to disable a link tag using CSS or JavaScript. We've also seen how to disable multiple anchor tags at once.

Hopefully, you've found this post helpful!

To learn more about web development, founding a start-up, and bootstrapping a SaaS, follow me on X!
  • Support Us
  • Discord
  • Share
  • Post
  • Share
Give feedback on this page, tweet at us, or join our Discord!Leave us a message!×
  • ☆
  • ☆
  • ☆
  • ☆
  • ☆
If you would like a reply back from us, please leave your email!Send Feedback

Từ khóa » Html A Tag Disabled