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 a-label approach-colleagues, classmates, teachers I have asked, they are all the same with the use of JavaScript, Do you really have to use JavaScript?
1, pure CSS to implement the HTML in the A-label disable:
Copy CodeThe code is as follows:
<title> How to disable a label </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>
Although the above uses pure CSS to implement the A-label disable, but 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:
Copy CodeThe code is as follows:
<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>
This way can be compatible with all browsers, but mixed with JavaScript, this is probably fatal flaw!!!
3. Use jquery to implement the disable of a tag in HTML:
Copy CodeThe code is as follows:
<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.
Use a plain CSS to disable the a tag in HTML without JavaScript
