clock  Mon - Sun 8.00 AM - 8.00 PM
mail  edu@teknowize.com
fb
instagram
play store
pinterest

How to disable a anchor tag in HTML using CSS, JS and jQuery

  Hariom Prajapati
  19 Jun 2022
  JQuery
Imperial Advance Hero Image

How to disable a anchor tag in HTML using CSS, JS and jQuery

In this tutorial we will see that how to disable a anchor tag in HTML using CSS, Javascript and jQuery.

Lets see examples to disable anchor tag using CSS, Javascript and jQuery.

 

1) Disable anchor tag in HTML using CSS

<!DOCTYPE html>
<html>

<head>
    <title>How to Disable a Anchor Tag in HTML using CSS - teknowize.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 using CSS</h1>
    <a href="https://www.teknowize.com" class="disabled">Go to teknowize.com</a>
</body>

</html>

 

2) Disable anchor tag in HTML using Javascript

<!DOCTYPE html>
<html>

<head>
    <title>How to Disable a Anchor Tag in HTML using Javascript - teknowize.com</title>
</head>

<body>
    <h1>How to Disable a Anchor Tag in HTML using Javascript - teknowize.com</h1>
    <a href="javascript:function() { return false; }">Go to teknowize.com</a>
</body>

</html>

 

3) Disable anchor tag in HTML using jQuery

<!DOCTYPE html>
<html>

<head>
    <title>How to Disable a Anchor Tag in HTML using jQuery</title>
</head>

<body>
    <h1>How to Disable a Anchor Tag in HTML using jQuery</h1>
    <a href="https:/www.teknowize.com" onclick="return false;">Go to teknowize.com</a>
</body>

</html>

 

Output

jquery