Home Programing Tutorials How to Disable Anchor Tag using HTML, CSS or JavaScript ?

How to Disable Anchor Tag using HTML, CSS or JavaScript ?

-

In various situations ,we need to disable a anchor tags in a webpage to prevent visitor by clicking the anchor tag  and going to that link  .There are several ways to Block or Disabled the anchor tag .In this article I will show you 3 Simple Methods of ‘How to Disable Anchor Tag‘ as well as make a compare between  three methods

1. Disable Anchor Tag using Simple HTML

In this Method,we used a simple HTML attribute in a anchor tag to Disabled the click i.e.  disabled=’disabled’
This adds a instruction to the anchor tag to prevent the clicking of 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 the browsers but only supported by old browsers (eg Internet Explorer )

2. Disable Anchor Tag using CSS

In this Method , we used a Simple CSS  style ‘pointer-events‘ is given none .Now the Anchor link doesn’t click able but the mobile cursor will change as there is a link , to prevent it 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 :

pointer-events via caniuse.com
via caniuse.com

It is widely use to disable a anchor tag in a small and simple line of Code but as shown in the above figure it doesn’t supported by very old browsers  apart from it this is a very widely usable method

3. 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 Disabled And add ‘return false’ value to the onClick event in a 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 with using.

Thanking for Visiting  if you like this article then Comment and Share  🙂

Subscribe to our Newsletter

To be updated with all the latest news, offers and special announcements.

How to Disable Anchor Tag using HTML, CSS or JavaScript ? 1
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.

Stay connected

18,624FansLike
10,427FollowersFollow
286FollowersFollow
4,412FollowersFollow
48,200SubscribersSubscribe

Latest Articles

The Best PCB Software On The Market Today

To design PCBs, you need to have the right tools. There are numerous options for PCB design software and the market only seems to...

7 Expert’s Ways Of Identifying Good Investment Opportunities

A good investor is always on the lookout to find the best opportunity and time to invest in an asset. Now, we all know...

Exploring the Most In-Demand Capabilities of SD-WAN Solutions

Organizations are transforming their corporate networks for a number of reasons. Therefore, Exploring the Most In-Demand Capabilities of SD-WAN Solutions. In the past, digital...

11 Best Torrent Client for Windows 2020

Torrenting helps you to download and manage files as efficiently as possible. It is ideal for downloading huge files quickly. It often happens that...

60 Best Hindi Dubbed Web Series on Netflix India

Are you tired of the language barrier? You found some excellent series to binge, but it’s in English so you chickened-out. Well, you don’t...

10 Best Discord Alternatives with No Bluetooth Headset Issue

Be it gamers, professionals, or an average individual, everyone is now using one or the other voice or text chat applications.  A normal individual...

7 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here