Hi Developers,
Today we are going to learn how to disable anchor tag clicking in HTML . The requirement of the anchor tag to be disabled is mainlt to restrict the access of any particular user or to diable the anchor tag for a particular time period during any validation process .
There are four ways of achieving the desired result
In this example we disabled the anchor tag using the style
a.disabled {
pointer-events: none; //Prevents function
cursor: default; //disable cursor change in a tag
opacity: .6;
}
<!DOCTYPE html>
<html>
<head>
<title>How to Disable a Anchor Tag in HTML? - ITSolutionsGuides</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? - ITSolutionsGuides</h1>
<a href="https://www.itsolutionsguides.com" class="disabled">Go to ITSolutionsGuides</a>
</body>
</html>In this example we are using onclick attribute
onclick="return false;" //returns false
<!DOCTYPE html>
<html>
<head>
<title>How to Disable a Anchor Tag in HTML? - ITSolutionsGuides</title>
</head>
<body>
<h1>How to Disable a Anchor Tag in HTML? - ITSolutionsGuides</h1>
<a href="https://www.itsolutionsguides.com" onclick="return false;">Go to ITSolutionsGuides</a>
</body>
</html>In this example we are using javascript function rather that using attribute in anchor tag
javascript:function() { return false; }
<!DOCTYPE html>
<html>
<head>
<title>How to Disable a Anchor Tag in HTML? - ITSolutionsGuides</title>
</head>
<body>
<h1>How to Disable a Anchor Tag in HTML? -ITSolutionsGuides</h1>
<a href="javascript:function() { return false; }">Go to ITSolutionsGuides</a>
</body>
</html>In this example anchor tag is disabled using disabled attribute and the we use styling
disabled="disabled"
a[disabled="disabled"] {
pointer-events: none;
}
<!DOCTYPE html>
<html>
<head>
<title>How to Disable a Anchor Tag in HTML? - ITSolutionsGuides</title>
<style type="text/css">
a[disabled="disabled"] {
pointer-events: none;
}
</style>
</head>
<body>
<h1>How to Disable a Anchor Tag in HTML? -ITSolutionsGuides</h1>
<a href="https://www.itsolutionsguides.com" disabled="disabled">Go to ITSolutionsGuides</a>
</body>
</html>We hope it helps everyone. Thanks for supporting ITSolutionsGuides and keep supporting us also follow us in social media platforms.
Be the first to know about releases and tutorial news and solutions.
We care about your data in our privacy policy.
ITSolutionsGuides was started mainly to provide good and quality web solutions for all the developers. We provide tutorials to support all the developers and also we try to provide solutions to the errors we face while coding.
ITSolutionsGuides, provide users with an easy-to-use form to reach out for support or inquiries.
Copyright © 2023 - 2024 All rights reserved | ITSolutionsGuides