Did you know that How to Disable Anchor Tag in HTML, CSS & JavaScript. This Post will give you in brief about everything on anchor tag & How to disable anchor tag. The anchor tag & the href attributes HTML uses the anchor tag to create a link to another document. Basically anchor tag is a tag which you can attach to a word or a phrase.
You are essentially creating a unique URL within the same page when you use this tag.
Today, in this post I will show you that How to Disable Anchor Tag in HTML, CSS & JavaScript. There are several ways and method to disabled the anchor tag. But these are very simple and easy methods you can try to disabling the Anchor tag.
How to Disable Anchor Tag in HTML with example
For disabling the anchor tag in the HTML, you need to follow these simple steps.
1. Open the Page’s HTML source file in text editor.
2. Locate the link you want to disable.
3. Move your cursor inside the double quotation marks in the ‘href’ section of anchor tag.
‘ Or ‘
1. First, use the HTML attribute in an anchor tag
2. For Disabling the click and add ‘disabled=’disabled’
3. This adds an instruction to anchor tag to prevent the clicking to link
Eg. :-
<html>
<head>
<title>How to Disable Anchor Tag using HTML</title>
</head>
<body>
<a href=’https://technofizi.net’ disabled=’disabled’>Click Here</a>
</body>
</html>
NOTE* – It’s not supported by all the browsers but only supported by old browsers (Default – Internet Explorer)
How to Disable Anchor Tag in CSS
1. For disabling first use the CSS style ‘pointer-events’ to none
2. But the Mobile cursor will change as there is a link
3. To prevent this, Set the ‘cursor-default’
4. That’s it, Done
Eg. :-
<html>
<head>
<title>How to Disable Anchor Tag using CSS</title>
<style>
.not-active {
pointer-events: none;
cursor: default;
}
</style>
</head>
<body>
<a href=”https://technofizi.net” class=”not-active”>Link</a>
</body>
</html>
How to Disable Anchor Tag using JavaScript
1. First, use the JavaScript event on anchor tag i.e ‘onclick’
2. Add this event to anchor tag which you want to disable & add ‘return false’ value
3. Add this ‘return false’ value after the ‘onclick’ value
Eg. :-
<html>
<head>
<title>How to Disable Anchor Tag in JavaScript</title>
</head>
<body>
<a onclick=”return false” href=”https://technofizi.net/” />TechnoFiZi</a>
</body>
</html>
This is how you can disable the anchor tag in all the languages like HTML, CSS and JavaScript. From this your anchor tag disabled. Hope you have learned everything from it.