HomePrograming TutorialsHow to disable Anchor Tag using HTML, CSS, and Javascript.

How to disable Anchor Tag using HTML, CSS, and Javascript.

In various situations, we need to disable anchor tags on a webpage to prevent visitors from clicking the anchor tag and going to that link. There are several ways to block or disable the anchor tag. In this article, I will show you 3 Simple Methods of ‘How to Disable Anchor Tag‘ as well as compare the three methods- by using Simple HTML, CSS, and Javascript

 1. How to disable anchor tag using HTML

In this method, we used a simple HTML attribute in an anchor tag to disable the click, ie.  disabled=’disabled’
This adds an instruction to the anchor tag to prevent clicking on the link

e.g.

<html>
<head>
<title>Disable Anchor Tag by Simple HTML</title>
</head>
<body>
<a href='http://techniblogic.com' disabled='disabled'>Click Here</a>
</body>
</html>

It not supported by all browsers but only by old browsers (eg Internet Explorer )

2.  How to Disable Anchor Tag Using CSS

In this method, we used a simple CSS style; ‘pointer-events‘ is given none. The anchor link isn’t clickable, but the mobile cursor will change as soon as there is a link. To prevent this, we have to set  ‘cursor: default’.

e.g.

<html>
<head>
<title>Disable Anchor Tag using CSS</title>
<style>
.not-active {
 pointer-events: none;
 cursor: default;
}
</style>
</head>
<body>
<a href="http://techniblogic.com" class="not-active">Link</a>
</body>
</html>

It is supported by many browsers, as shown below:

how to disable anchor tag
via caniuse.com

It is widely used to disable an anchor tag in a small and simple line of code, but as shown in the above figure, it’s not supported by ancient browsers Apart from that, this is a very widely usable method.

3. How to disable Anchor tag using JavaScript

In this method, we use a JavaScript event on the anchor tag, i.e., ‘onClick’. We add this event to the anchor tag, which we want to disable And add the ‘the return false’ value to the onClick event in an anchor tag

e.g.

<html>
<head>
<title>Disable Anchor Tag using JavaScript</title>
</head>
<body>
<a onclick="return false" href="http://techniblogic.com/" />Techniblogic</a>
</body>
</html>

You may prefer one you are comfortable using.

Thank you for visiting. If you like this article, leave a comment with your opinion. Read more such articles on Techniblogic.

Nimish Gupta
Nimish Gupta
Hi, I am a Web Designer and Tech Writer for many years. And I love to learn and share new things. Currently practicing SEO and Digital Marketing on my website.

Latest Articles

Exclusive Article

How to Find Instagram Trending Reels Song [4 Only Ways]

Looking for Instagram Trending Reels Song to create your own trending Instagram reels? Don't worry! Here are the best ways to find Instagram Trending...

7 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here