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,718FansLike
10,427FollowersFollow
264FollowersFollow
4,463FollowersFollow
48,200SubscribersSubscribe

Latest Articles

The Pros & Cons of Using Social Live Streaming Features

Live streaming is fast becoming a preferred way for brands and individuals to market themselves online. It offers audiences an authentic, honest and intimate...

How Does Content Help Your Business?

Running a successful business means having an online presence but for an online presence, content help your business. With the huge number of businesses...

What Are What Are Managed IT Services?

If there is one thing to be expected as civilization keeps advancing and as many inventions are made, it is that the systems and...

Best Non Contact Thermometer to Check Coronavirus Fever!

In these tough times, thermometers are turning out to be a lifesaver. Traditionally, to measure body temperature we often prefer using contact thermometers that...

15 Best UV Sterilizers For Phones : Must Have Coronavirus Gadget

Looking for "Best UV Sterilizers to Safely Kill Germs"? In this article, we will show you Best UV Sterilizers For Phones and other daily...

Best Face Masks For Coronavirus For Sale (2020) – Types of Mask That Works!

The whole world is currently under the threat of the novel coronavirus. This virus is known for causing the disease that is called COVID-19....

7 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here