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!
- Managing PHP Dependencies with Composer
- Getting Started with Svelte
- Getting Started with Express
- Create an RSS Reader in Node
- Getting Started with Electron
- Best Visual Studio Code Extensions for 2022
- 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 User Location using JavaScript's Geolocation API
- Getting Started with Moment.js
- Setting Up a Local Web Server using Node.js