JavaScript Disable a Anchor Tag in HTML
Hello Dev's, today I'll show you how to disable an Anchor tag (<a></a>). We always use button when we need to disable the clicking action. But button is not always the best fitted because we need to redirect the user by clicking the button. here we'll see three examples of how to disable a tag. So, let's see how we can disable an anchor tag.
In the first example, we'll use JavaScript onclick event handler. In the event by default we'll give return false. Let's see the below code snippet.
<a href="shouts.dev" onclick="return false;">Go to shouts.dev</a>In the second example, we'll use CSS class to handle the click event. This example is the most preferred by me. Because in real life I always need to disable/enable the button. So, I can handle easily programmatically using JS. So, let's see the below code snippet.
html:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Disable a Anchor Tag in HTML - shouts.dev</title>
<link rel="stylesheet" href="">
<style type="text/css">
.disable_a {
pointer-events: none;
cursor: default;
opacity: .6;
}
</style>
</head>
<body>
<a href="https://www.shouts.dev" class="disable_a">Go to shouts.dev</a>
</body>
</html>In this example, we'll use JavaScript function to always return false. Let's see the below code snippet.
<a href="javascript:function() { return false; }">Go to shouts.dev</a>That's it for today. I hope you've enjoyed this tutorial. Thanks for reading. 🙂
