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

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>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<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

Recommend

How to optimize MySQL group by statement

In MySQL, create a new table with three fields, i...

Creative opening effect achieved by combining CSS 3.0 with video

Let me share with you a creative opening realized...

Implementation of nested jump of vue routing view router-view

Table of contents 1. Modify the app.vue page 2. C...

Summary of JavaScript custom object methods

Table of contents 1. Use object to create an obje...

Example of implementing circular progress bar in Vue

Data display has always been a demand that all wa...

Solve the scroll-view line break problem of WeChat applet

Today, when I was writing a small program, I used...

A brief introduction to Linux environment variable files

In the Linux system, environment variables can be...

Steps to run ASP.NET Core in Docker container

There are too much knowledge to learn recently, a...

In-depth explanation of closure in JavaScript

Introduction Closure is a very powerful feature i...

How to fix some content in a fixed position when scrolling HTML page

This article mainly introduces how some content i...

Summary of new usage of vi (vim) under Linux

I have used the vi editor for several years, but ...

Some tips for using less in Vue projects

Table of contents Preface 1. Style penetration 1....

MySQL SQL statement method to hide the middle four digits of the mobile phone number

First query table structure (sys_users): SELECT *...

Solution to the problem of not being able to obtain the hostname of the host in the docker container

The test is passed in the nodejs environment. The...

Detailed explanation of built-in methods of javascript array

Table of contents 1. Array.at() 2. Array.copyWith...