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

19,006FansLike
10,640FollowersFollow
204FollowersFollow
4,690FollowersFollow
48,200SubscribersSubscribe

Latest Articles

Easiest Way to Add a Contact Form to Your WordPress Website

Contact forms are increasingly important in websites, even though the traditional contact form in the ‘contact us’ section has largely been on the decline....

How Can a Digital Marketing Agency Make Your Company More Recognizable?

Becoming more recognizable to potential clients and customers is one of the key ways to ensure an increase in revenue and sales - nowadays,...

4 Ways Technology Can Be Used to Improve Your Business

Technology has, for the most part, made the world of today a much better place. It allows loved ones to remain in contact with...

Xiaomi YEELOCK Smart Bluetooth Drawer Lock – Best Smart Home Gadget 2020!

Xiaomi Smart Drawer Cabinet lock is a new and innovative product by Xiaomi that is designed to guard your personal space. It is the...

Airtel and Google Cloud Partner to Boost Collaboration, Productivity and Digital Transformation in India

Bharti Airtel Limited, commonly known as Airtel has announced a partnership with Google Cloud in order to provide services to the growing needs of...

Vaping RTA vs RDA: Few Things You Should Know About Vaping

Are you really looking to quit smoking? Well, we all know that smoking can lead to an addiction that can sometimes cause serious health...