Use pure CSS to disable the a tag in HTML without JavaScript

In fact, this problem has already popped up when I first learned the select tag in HTML. To this day, I still haven't found a way to disable the a tag using pure CSS. I have asked my colleagues, classmates, and teachers, and they all used JavaScript. Is it really necessary to use JavaScript?

1. Use pure CSS to disable the a tag in HTML:

Copy code

The code is as follows:

<html>
<head>
<title>How to disable the a tag</title>
<metacontent="text/html; charset=GB2312"http-equiv="Content-Type">
<style type="text/css">
body{
font:12px/1.5 \5B8B\4F53, Georgia, Times New Roman, serif, arial;
}
a{
text-decoration:none;
outline:0 none;
}
.disableCss{
pointer-events:none;
color:#afafaf;
cursor:default
}
</style>
</head>
<body>
<aclass="disableCss" href="http://www.baidu.com/">Baidu</a>
       
<aclass="disableCss" href="#"onclick="javascript:alert('Hello!!!');">Click</a>
</body>
</html>

Although pure CSS is used above to disable the a tag, since Opera and IE browsers do not support the pointer-events style, the above code cannot disable the a tag in these two browsers.

2. Use Jquery and CSS to disable the a tag in HTML:

Copy code

The code is as follows:

<html>
<head>
<title>02 ——Disabling the a tag in HTML with Jquery and CSS</title>
<meta content="text/html; charset=GB2312" http-equiv="Content-Type">
<script type="text/javascript" src="./jquery-1.6.2.js"></script>
<script type="text/javascript">
$(function() {
$('.disableCss').removeAttr('href'); //Remove the href attribute in the a tag
$('.disableCss').removeAttr('onclick'); //Remove the onclick event in the a tag
});
</script>
<style type="text/css">
body {
font: 12px/1.5 \5B8B\4F53, Georgia, Times New Roman, serif, arial;
}
a {
text-decoration: none;
outline: 0 none;
}
.disableCss {
color: #afafaf;
cursor: default
}
</style>
</head>
<body>
<a class="disableCss" href="http://www.baidu.com/">Baidu</a>
       
<a class="disableCss" href="#" onclick="javascript:alert('Hello!!!');">Click</a>
</body>
</html>

This method is compatible with all browsers, but it mixes JavaScript, which is probably a fatal flaw! ! !

3. Use Jquery to disable the a tag in HTML:

Copy code

The code is as follows:

<html>
<head>
<title>03 ——Disabling the a tag in HTML with Jquery</title>
<meta content="text/html; charset=GB2312" http-equiv="Content-Type">
<script type="text/javascript" src="./jquery-1.6.2.js"></script>
<script type="text/javascript">
$(function() {
$('.disableCss').removeAttr('href'); //Remove the href attribute in the a tag
$('.disableCss').removeAttr('onclick'); //Remove the onclick event in the a tag
$(".disableCss").css("font","12px/1.5 \\5B8B\\4F53, Georgia, Times New Roman, serif, arial");
$(".disableCss").css("text-decoration","none");
$(".disableCss").css("color","#afafaf");
$(".disableCss").css("outline","0 none");
$(".disableCss").css("cursor","default");
});
</script>
</head>
<body>
<a class="disableCss" href="http://www.baidu.com/">Baidu</a>
       
<a class="disableCss" href="#" onclick="javascript:alert('Hello!!!');">Click</a>
</body>
</html>

Pure Jquery is used above to implement the function of disabling the a tag in HTML.

<<: A brief analysis of CSS :is() and :where() coming to browsers soon

>>: How to set an alias for a custom path in Vue

Solve the Chinese garbled problem of mysql5.5 database command line under Windows 10

Use pure CSS to disable the a tag in HTML without JavaScript

Solve the Chinese garbled problem of mysql5.5 database command line under Windows 10

MySQL table and column comments summary

JavaScript built-in date and time formatting time example code

Not all pop-ups are rogue. Tips on designing website pop-ups

Detailed explanation of Docker daemon security configuration items

Getting Started Tutorial on Animating SVG Path Strokes Using CSS3

Will MySQL execute the update statement again if it has the same data as the original one?

About the layout method of content overflow in table

Example of how to display a default image when an image does not exist in HTML

Detailed explanation of hosts file configuration on Linux server

Recommend

A brief discussion on Flex layout and scaling calculation

Simple CSS text animation effect

Two methods of implementing automatic paging in Vue page printing

A detailed tutorial on how to install Jenkins on Docker for beginners

Design Reference Beautiful and Original Blog Design

JavaScript navigator.userAgent obtains browser information case explanation

How can we promote Jiedaibao so that everyone will register? Jiedaibao promotion methods and skills

A brief analysis of MySQL backup and recovery

Solution to the problem that Xshell cannot connect to the virtualBox virtual machine

Detailed steps for manually configuring the IP address in Linux

Summary of commonly used time, date and conversion functions in Mysql

MySQL json format data query operation

A comprehensive analysis of what Nginx can do

Solve the problem of VScode configuration remote debugging Linux program

How to use async and await in JS