How to disable an anchor tag in HTML
Sometimes we may need to disable an anchor tag in HTML. There are so many ways to disable the a tag but in this article we will explain to you the three different methods with examples to disable the anchor tag.
Checkout more articles on JavaScript
Three different ways to disable an anchor tag
1. Using CSS
The pointer-events: none CSS style can be used to deactivate an HTML anchor element.
All click events on the anchor element will be disabled if pointer-events: none is set.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html> <head> <title>How to disable an anchor tag in html - Clue Mediator</title> <style type="text/css"> a.disabled { pointer-events: none; cursor: default; opacity: 0.7; } </style> </head> <body> <h1>How to disable an anchor tag in html - Clue Mediator</h1> <a href="https://www.cluemediator.com" class="disabled">Go to ClueMediator.com</a> </body> </html> |
2. Using Inline JavaScript
Disable HTML anchor with inline JavaScript href="javascript:void(0)".
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html> <html> <head> <title>How to disable an anchor tag in html - Clue Mediator</title> </head> <body> <h1>How to disable an anchor tag in html - Clue Mediator</h1> <a href="javascript:void(0)">Go to ClueMediator.com</a> </body> </html> |
3. Using click event
Let’s bind the click event to a tag.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html> <html> <head> <title>How to disable an anchor tag in html - Clue Mediator</title> </head> <body> <h1>How to disable an anchor tag in html - Clue Mediator</h1> <a href="https://www.cluemediator.com" onclick="return false;">Go to ClueMediator.com</a> </body> </html> |
I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂
