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,602FansLike
10,427FollowersFollow
351FollowersFollow
4,408FollowersFollow
48,200SubscribersSubscribe

Latest Articles

Setting Up A Music Studio To Record Guitar Samples

There is so much more that we can do at home thanks to advances in technology. There used to be a time when we...

A hack for comfort and productivity

Getting tired during work very soon? This may concern the quality of your work, productivity, creativity, etc. All you need is the right selection...

The best ways to buy the latest mobile phone!

If you want to get your hands on the latest mobile phone, there are more ways than ever to do it. Whether you’re looking...

House gadgets: how to spruce up your new home

Moving home is no easy task – from searching for your perfect house to applying for a mortgage, and from packing up your belongings...

78 Secret Tools used in Investigative Journalism 2021

‘The act of making the invisible visible.’ This one line sums up the extraordinary ability of the field of journalism. It defines something, a meaning,...

10 PRIVATE Best Money Management Apps for Android 2021

We all struggle when it comes to managing money, sticking to a budget, and even handling an investment. However, the time has changed a...

7 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here