How to Disable a HTML Anchor Tag
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>
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!
- Getting Started with Svelte
- Getting Started with Electron
- How to Serve Static Files with Nginx and Docker
- How to deploy a Deno app using Docker
- How to deploy a Node app using Docker
- Getting Started with Sass
- Learn how to use v-model with a custom Vue component
- Getting Started with Handlebars.js
- Getting User Location using JavaScript's Geolocation API
- Getting Started with Moment.js
- Using Push.js to Display Web Browser Notifications
- Building a Real-Time Note-Taking App with Vue and Firebase