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
401FollowersFollow
4,190FollowersFollow
48,200SubscribersSubscribe

Latest Articles

How Snapchat Marketing Helps To Grow Small Business?

Do you know which media is recognized by an icon of a social media ghost mascot? Then you are a snap chatter. Snapchat is...

The Best Responsive Design Strategy in 2021

Responsive web design implies any website that is designed with mobile-friendly features, content, and with media. In addition, responsive websites can adapt to change...

7 Best Procreate for Windows 10 Free Download

Is procreate only for iPad? Can I get Procreate for Windows? Here is Best Procreate for Windows 10. Due to the fast-paced technology in...

5 Fastest DNS Servers 2021 (Free Public DNS)

Looking for best fastest dns servers? The Internet has become a part of our daily routine. We use the internet almost for each and...

10 Best Rainmeter Skins 2021 for Windows [Free Download]

The first thing you encounter while operating on a PC/Laptop is its how it actually looks. It may sound irrelevant but sometimes you’re judged...

The best ways for data Backup

In today’s uber-connected, high-tech world, data backup is the most crucial part, and most people don't realize the importance of data. Indeed, many industry...

7 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here