HomePrograming TutorialsHow 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.

Avatar of 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.
- Advertisment -

Stay connected

18,405FansLike
10,427FollowersFollow
433FollowersFollow
4,159FollowersFollow
48,200SubscribersSubscribe

Latest Articles

Ways to Sell or Trade in Your Old iPhone

If your iPhone is coming to the end of its lifespan, or you’ve got your eye on a shiny new upgrade, then it might...

Did the US Authorities Force Mikhail Kokorich to Leave his Startup?

Few companies replace their CEOs before going public — not unless there is a very specific CEO-related complication interfering with the process. But, it...

Best Apps for Staying Connected with your Loved Ones

To inhibit the development of the COVID-19 pandemic, social separation does not have to mean complete isolation. For example, sports seasons have been cancelled;...

The Importance Of Having A Phone Case

In today's world, every smartphone user experiences a significant improvement in both their personal and professional lives. They take into consideration a broad range...

EHR Software Development: Features And Technical Aspects

Digitalisation has helped many sectors in different ways, mainly the healthcare sector. From simplifying the consultation process, managing healthcare data, supporting doctors, elevating the...

Realme Dizo Watch 2, Realme Dizo Watch Pro Smartwatches With SpO2 Monitoring Launched in India

In one of our latest posts, we discussed the launch of two smartwatches by Realme - Dizo Watch 2 and Dizo Watch Pro. These...

7 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here