Home > Developer > Web Develop
In fact, this problem in the first time to learn HTML in the Select tag has come out, today, still do not find the use of pure CSS to disable the A-label approach-colleagues, classmates, teachers I have asked, they are all the same with the use of JavaScript, Is it really necessary to use JavaScript?
1, pure CSS to implement the HTML in the A-label disable:
<title> How to disable 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>
<body>
<aclass= "Disablecss" href= "http://www.baidu.com/" > Baidu </a>
<aclass= "Disablecss" href= "#" onclick= "Javascript:alert (' Hello!!! ‘);" > Click </a>
</body>
Despite the use of pure CSS to disable the a tag, only because opera, IE browser does not support the pointer-events style, so the above code in these two types of browsers do not play the role of disabling a tag.
2. Use jquery and CSS to implement the disable of a tag in HTML:
<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 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>
<body>
<a class= "Disablecss" href= "http://www.baidu.com/" > Baidu </a>
<a class= "Disablecss" href= "#" onclick= "Javascript:alert (' Hello!!! ‘);" > Click </a>
</body>
Such a way to be compatible with all browsers, but mixed with JavaScript, this is probably a fatal flaw!!!
3. Use jquery to implement the disable of a tag in HTML:
<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 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>
<body>
<a class= "Disablecss" href= "http://www.baidu.com/" > Baidu </a>
<a class= "Disablecss" href= "#" onclick= "Javascript:alert (' Hello!!! ‘);" > Click </a>
</body>
The above uses pure jquery to implement the ability to disable the a tag in HTML.
"0 minutes Demo Download "
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
