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

最新推荐文章于 2021-08-06 11:03:35 发布

33-Hope

最新推荐文章于 2021-08-06 11:03:35 发布

阅读量719

点赞数

分类专栏： javaweb 文章标签： javascript dom

本文链接：https://blog.csdn.net/LuM523/article/details/104208975

版权

javaweb 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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.点击后
在这里插入图片描述

33-Hope

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
href="javascripe:void(0);"的作用

href="javascripe:void(0);"的作用：实现了可以被鼠标点击，但无法跳转到href指定的url在Javaweb中 < a href=" "> 标签可以实现超链接的形式，到达指定的界面（引号中为空，则是在现有链接到现有界面，也就是链接到自己）。void(0) 是个运算符是用来阻止返回值的，从而达成了阻止跳转界面的功能。　　　使用用例：　　　正在...
复制链接

扫一扫