Using pure CSS to disable a tag in HTML without JavaScript

Time:2020-2-23

In fact, this question came out when we first learned the select tag in HTML. Up to now, we still haven’t found a way to disable the a tag by using pure CSS – colleagues, classmates, teachers I asked them all, they all use JavaScript in the same way. Do we really have to use JavaScript?

1. To disable a tag in HTML, use CSS only

Copy code

The code is as follows:

<html>
<head>
How to disable a tag
<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 the above-mentioned code uses pure CSS to disable a tag, but because opera and IE browsers do not support the pointer events style, the above code does not play a role in disabling a tag in these two types of browsers.

2. Disable a tag in HTML with jQuery and CSS:

Copy code

The code is as follows:

<html>
<head>
< title > 02 — disable 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 from the a tag
$(‘. Disablecss’). Removeattr (‘onclick’); / / remove the onclick event from 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 href = “http://www.baidu.com/” > Baidu</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
< a href = “ා” onclick = “javascript: Alert (‘Hello!!! ‘; “> Click</a>
</body>
</html>

This way can be compatible with all browsers, but mixed with JavaScript, which may be fatal!!!

3. Disable a tag in HTML with jQuery:

Copy code

The code is as follows:

<html>
<head>
< title > 03 — disable 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 from the a tag
$(‘. Disablecss’). Removeattr (‘onclick’); / / remove the onclick event from 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 href = “http://www.baidu.com/” > Baidu</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
< a href = “ා” onclick = “javascript: Alert (‘Hello!!! ‘; “> Click</a>
</body>
</html>

The above uses pure jQuery to realize the function of disabling a tag in HTML.