一个好玩的小制作,以及在<a/>中的标签href="javascript:;"/href="javascript:void(0);"/href="javascript:"的用法
一:一个小图标的制作
我们在支付宝、微信等某些地方上传文件时会遇到以下的图标,但是这样的图标其实可以用<a/>标签以及css样式完成,
具体代码如下:
<!DOCTYPE html> <html> <head></head> <style> .add{ display: block; /*以块级元素展示,可以设置宽高*/ width: 100px; height: 100px; position: relative; color: #ccc; transition: color .25s; /*实现动画效果*/ border:1px solid; } .add:before{ /*在<a/>元素前有些内容*/ content: ""; /*具体内容,此示例就不需要填写*/ width: 80px; position: absolute; left: 10px; top: 45px; border-top: 10px solid; /*设置上边框,最后显示+当中的- */ } .add:after{ /*在<a/>元素后有些内容*/ content: ""; /*具体内容,此示例就不需要填写*/ height: 80px; position: absolute; left: 45px; top: 10px; border-left: 10px solid; /*设置左边框,最后显示+当中的| */ } .add:hover{ color: #067; } </style> <body> <p>mimimi</p> <!-- 无关的--> <a class="add" href="javascript:"></a> </body> </html>
二、由上例中的<a/>标签中的 href="javascript:" 引发的思考
href="javascript:" 是一个伪协议,可以让我们通过一个链接来调用javascript函数,表示在触发<a>默认动作时,执行一段JavaScript代码;
href="javascript:;" 表示什么都不执行,这样点击<a/>时就没有任何反应,效果等价于 href="javascript:void(0);"
注意:(1)只使用分号可能会影响before、after等操作;
(2)href="javascript:void(0);" 不刷新页面;
(3)如果标签是以下格式:<a href="javascript:void(0);" onclick=function()>......</a>,那么 onclick 会先于 href 执行。
(4)<a href="javascript:void(0)" onclick="return false">......</a> 会阻止冒泡。
后续遇到在更