How to Disable a Anchor Tag in HTML?

Share Me
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Hello Dev’s
In this tutorial i am focused on how to disable anchor tag in html using javascript. So you will learn from here how to disable a tag in html. I will help you to give a example of how to disable a element by javascript, so this article goes to details on how to disable a tag by using jquery. So follow bellow step for how to disable a anchor tag in jquery.

So if you want to disable any tag then, now i will give you several examples of how to disable tag by using css, jquery and javascript.

Now, let’s see some good and simple example that will help you how to disable a tag href in html.

Example 1:

<!DOCTYPE html>
<html>
<head>
    <title>How to Disable a Anchor Tag in HTML? - Codingspoint.com</title>
    <style type="text/css">
        a.disabled {
          pointer-events: none;
          cursor: default;
          opacity: .6;
        }
    </style>
</head>
<body>
  
<h1>How to Disable a Anchor Tag in HTML? - Codingspoint.com</h1>
  
<a href="https://www.Codingspoint.com" class="disabled">Go to ItSolutionStuff.com</a>
  
</body>
</html>

Read Also : How to get last 7 days record in laravel?

Next Example 2:

<!DOCTYPE html>
<html>
<head>
    <title>How to Disable a Anchor Tag in HTML? - Codingspoint.com</title>
</head>
<body>
  
<h1>How to Disable a Anchor Tag in HTML? - Codingspoint.com</h1>
  
<a href="https://www.itsolutionstuff.com" onclick="return false;">Go to Codingspoint.com</a>
  
</body>
</html>

Example 3:





<!DOCTYPE html>
<html>
<head>
    <title>How to Disable a Anchor Tag in HTML? - Codingspoint.com</title>
</head>
<body>
  
<h1>How to Disable a Anchor Tag in HTML? - Codingspoint.com</h1>
  
<a href="javascript:function() { return false; }">Go to Codingspoint.com</a>
  
</body>
</html>

Example 4:

<!DOCTYPE html>
<html>
<head>
    <title>How to Disable a Anchor Tag in HTML? - Codingspoint.com</title>
    <style type="text/css">
        a[disabled="disabled"] {
            pointer-events: none;
        }
    </style>
</head>
<body>
  
<h1>How to Disable a Anchor Tag in HTML? - Codingspoint.com</h1>
  
<a href="https://www.Codingspoint.com" disabled="disabled">Go to ItSolutionStuff.com</a>
  
</body>
</html>

So I hope it will help you. Also you can follow us on Facebook

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →

Leave a Reply

Your email address will not be published. Required fields are marked *

seventeen − 10 =