href=”javascripe:void(0);”的作用

  • Post author:
  • Post category:java




href=”javascripe:void(0);”的作用:实现了 可以被鼠标点击,但无法跳转到href指定的url

在Javaweb中

< a href=” “>

标签可以实现超链接的形式,到达指定的界面(引号中为空,则是在现有链接到现有界面,也就是链接到自己)。

void(0) 是个运算符 是用来阻止返回值的,从而达成了阻止跳转界面的功能。


使用用例:


正在学习JavaScript中DOM的Node对象,其中

removeChild()

方法可以实现

删除指定节点。

现在向屏幕中添加一个超链接,使得点击超链接可以删除指定节点(这里删除div2)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node对象</title>
    <style>
        div{
            border: 1px solid red;
        }
        #div1{
            width: 200px;
            height: 200px;
        }
        #div2{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">div2</div>
        div1
    </div>
    <a href="javascript:void(0);" id="del">删除子节点</a>
<script>
    //1.获取超链接
    var element_a = document.getElementById("del");
    //2.绑定单击事件
    element_a.onclick = function(){
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        //删除div2节点
        div1.removeChild(div2); 
    }
    /*
        超链接功能:
            1.可以被点击:样式
            2.点击后跳转到href指定的url

        需求:保留1功能,去掉2功能
        实现:href="javascript:void(0);"
     */
</script>
</body>
</html>



实现效果:


1.点击前:


在这里插入图片描述


2.点击后


在这里插入图片描述



版权声明:本文为LuM523原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。