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.

Stay connected

18,858FansLike
10,531FollowersFollow
231FollowersFollow
4,596FollowersFollow
48,200SubscribersSubscribe

Latest Articles

Best Coronavirus Mask 2020 : Buy Online on Amazon!

Recently, People are racing to buy face masks amid the coronavirus outbreak, leading to the shutdown of schools and colleges or even a whole...

Disney+ Hotstar Review – Worth to Buy Premium Membership?

There are so many media streaming applications in the market, and now we have another one added in the list, Disney+ Hotstar Review, that has...

Where to Buy Redmi Note 9S at Best Price on SALE (2020)

Redmi, a sub-brand by the Chinese company named Xiaomi is the very much user-friendly brand as it offers smartphones at a very affordable price....

Resso App Review – Best Music App in India by Tiktok (2020)

Here is Resso App Review in which I have compared this New Social Music Streaming App by Tiktok with other Online Music apps in...

Latest Free Fire Update Brings Popular Requests to the Game

Free Fire by Garena is the ultimate survival shooter game available on mobile and the games latest patch update launches on April 9.  It...

Netflix launches improved parental controls for families

Netflix is a popular over-the-top streaming media service that allows people to watch a variety of award-winning TV shows, movies, documentaries, and many more....