How to Disable a Anchor Tag in HTML?

Html

Nicesnippets

1555

21-06-2021


Hi Guys,

In this example,I will learn you how to disable a anchor tag in html.you can easy and simply disable a anchor tag in html.

We’ve now seen how to disable an HTML anchor/link element (a tag) using pointer-events: none, which can be done without touch the existing href attribute using styles.

Next we’ll see how to disable an HTML anchor/link element using inline JavaScript inside of the href attribute.

Example 1:


<!DOCTYPE html>

<html>

<head>

<title>How to Disable a Anchor Tag in HTML? - Nicesnippets.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? - Nicesnippets.com</h1>

<a href="https://www.nicesnippets.com/" class="disabled">Go to Nicesnippets.com</a>

</body>

</html>

Example 2:

<!DOCTYPE html>

<html>

<head>

<title>How to Disable a Anchor Tag in HTML? - Nicesnippets.com</title>

<style type="text/css">

a[disabled="disabled"] {

pointer-events: none;

}

</style>

</head>

<body>

<h1>How to Disable a Anchor Tag in HTML? - Nicesnippets.com</h1>

<a href="https://www.nicesnippets.com/" disabled="disabled">Go to Nicesnippets.com</a>

</body>

</html>

Example 3:

<!DOCTYPE html>

<html>

<head>

<title>How to Disable a Anchor Tag in HTML? - Nicesnippets.com</title>

</head>

<body>

<h1>How to Disable a Anchor Tag in HTML? - Nicesnippets.com</h1>

<a href="javascript:function() { return false; }">Go to Nicesnippets.com</a>

</body>

</html>

Example 4:

<!DOCTYPE html>

<html>

<head>

<title>How to Disable a Anchor Tag in HTML? - Nicesnippets.com</title>

</head>

<body>

<h1>How to Disable a Anchor Tag in HTML? - Nicesnippets.com</h1>

<a href="https://www.itsolutionstuff.com" onclick="return false;">Go to Nicesnippets.com</a>

</body>

</html>

It will help you...