Table of Contents
- Disable HTML Anchor Tag with CSS
- Disable HTML Anchor Tag with JavaScript
- 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
See AlsoDisable a HTML link/anchor tag · Code with HugoWord: Remove a linkHow to Fix Selenium's "Element Is Not Clickable at Point"How to make an area unclickable with CSS?<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>
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.
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!
Leave us a message!
×