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

Problems encountered when installing mysql8.0.15 winx64 on Win10 and connecting to the server

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

Problems encountered when installing mysql8.0.15 winx64 on Win10 and connecting to the server

Windows10 mysql 8.0.12 non-installation version configuration startup method

HTML background color gradient achieved through CSS

Detailed example of using case statement in MySQL stored procedure

Solution to MySQLSyntaxErrorException when connecting to MySQL using bitronix

What are the drawbacks of deploying the database in a Docker container?

Tutorial on how to modify element.style inline styles

Example of ellipsis when CSS multi-line text overflows

How to mount a disk in Linux and set it to automatically mount on boot

How to install common components (mysql, redis) in Docker

Recommend

How to directly access the docker for windows container intranet through an independent IP

Nginx location matching rule example

CSS and HTML and front-end technology layer diagram

CSS3 realizes the website product display effect diagram

Reasons and solutions for the failure of React event throttling effect

Windows 2019 Activation Tutorial (Office2019)

Discuss the development trend of Baidu Encyclopedia UI

MySQL 5.7 and above version download and installation graphic tutorial

MySQL 5.7 zip archive version installation tutorial

About MYSQL, you need to know the data types and operation tables

MySQL uses triggers to solve the row limit of the table in the database. Detailed explanation and examples

A comprehensive understanding of Vue.js functional components

Detailed explanation of the usage of two types of temporary tables in MySQL

Html+css to achieve pure text and buttons with icons

How to forget the password of Jenkins in Linux