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 TypeScript
- How to Install Node on Windows, macOS and Linux
- Getting Started with Solid
- Git Tutorial: Learn how to use Version Control
- How to deploy a .NET app using Docker
- How to deploy an Express app using Docker
- How to deploy a Node app using Docker
- Using Puppeteer and Jest for End-to-End Testing
- Getting Started with Handlebars.js
- Setting Up Stylus CSS Preprocessor
- Getting Started with Vuex: Managing State in Vue
- Using Axios to Pull Data from a REST API