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.

Recommended Today

What are the new methods of visual + map technology?

Last week, Ren Xiaofeng, chief scientist of Alibaba Gaode map, made a technical exchange with you on the development of computer vision related technology and the application in the field of map travel at the online live broadcast activity of “cloud dialogue” between senior students of Alibaba. The interaction between live broadcast is hot. Especially […]