Skip to content

All topics  /  General

How to Disable a Anchor Tag in HTML?

General ·

Development teams using “How to Disable a Anchor Tag in HTML?” in client or internal work can use this team workflow page to document project effort and hand-offs, then assess the record against delivered functionality, tests and agreed outcomes.

Validate current syntax, security guidance and supported versions through GitHub before using the example in production.

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="/" 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="/" 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...

More on this topic