一个好玩的小制作，以及在<a/>中的标签href="javascript:;"/href="javascript:void(0);"/href="javascript:"的用法...

最新推荐文章于 2021-09-19 22:04:54 发布

baique6974

最新推荐文章于 2021-09-19 22:04:54 发布

阅读量142

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/cc-freiheit/p/7737407.html

版权

一：一个小图标的制作

我们在支付宝、微信等某些地方上传文件时会遇到以下的图标，但是这样的图标其实可以用<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);" οnclick=function()>......</a>,那么 onclick 会先于 href 执行。

　　　　　　　(4)<a href="javascript:void(0)" οnclick="return false">......</a> 会阻止冒泡。

 后续遇到在更

转载于:https://www.cnblogs.com/cc-freiheit/p/7737407.html

baique6974

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个好玩的小制作，以及在<a/>中的标签href="javascript:;"/href="javascript:void(0);"/href="javascript:"的用法...

一：一个小图标的制作我们在支付宝、微信等某些地方上传文件时会遇到以下的图标，但是这样的图标其实可以用<a/>标签以及css样式完成，具体代码如下：<!DOCTYPE html><html><head></head><style> .add{ display:...
复制链接

扫一扫