href="#"和href=”javascript:"的区别-优快云博客

本文详细介绍了HTML中的<a>标签及其href属性的使用方法，包括如何利用href属性实现页面跳转、作为按钮使用而不触发页面跳转等功能，并通过实例展示了不同href属性值的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.<a> 标签的 href 属性用于指定超链接目标的 URL，href 属性的值可以是任何有效文档的相对或绝对 URL，包括片段标识符和 JavaScript 代码段。href="javascript:"，其中javascript:是伪协议，它可以让我们通过一个链接来调用javascript函数.而采用这个方式 javascript:可以实现A标签的点击事件运行时，如果页面内容很多，有滚动条时，页面不会乱跳，用户体验更好。

href="javascript:" 这本身就是一条空语句。简单的说就是这个a标签点击链接失去作用了

2.href="javascript:" 主要作用让它有超链接样式的作用，看起来像个按钮，有操作不是文本，事实上是链接到一个空语句，一般设置onclick事件。

在html中标签表示是一个超链接

1一般作用的跳转页面需要设置跳转的页面就是在href属性中设置要跳转的地址

2.作为一个按钮使用，可以点击但是不跳转页面而是做其他处理，就需要设置href 属性为javascript:

a 标签做按钮使用不跳转页面 

javascript:表示这是一个空连接。点击之后没任何反应。
类似的是#，但是一个#点击之后页面很长的情况下会会滚到顶部；而javascript：是没有这种问题的。经过测试他还是在当前位置。
当然###这样的效果就跟javascript:一样了

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
      #div1
      {
        height: 1000px;
        width: 300px;
        background: #cccccc;
      }

    </style>
</head>
<body>
<div id="div1"></div>
<ul id="ull">
    <li>23235<a href="#">隐藏</a></li>
    <li>2sfwfef<a href="#">隐藏</a></li>
    <li>2dfkfdk5<a href="#">隐藏</a></li>
    <li>jdieow5<a href="###">隐藏</a></li>
    <li>eofod5<a href="javascript:">隐藏</a></li>

</ul>
<script>
    var oUl = document.getElementById('ull');
    var aA = oUl.getElementsByTagName('a');
    for(var i=0;i<aA.length;i++)
    {
        aA[i].onclick = function ()
        {
            this.parentNode.style.display = 'none';
        };
    }


</script>

</body>
</html>