给a标签添加点击事件却无效

整理笔记,看到一个bug,代码大意如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 20px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
<div></div>
<a href="">点击</a>
<script>
    document.querySelector('a').onclick = function(){
        document.querySelector('div').style.display = 'block';
    }
</script>
</body>
</html>

运行后会发现div并没有添加样式,但是会看到一瞬间的闪现,打断点调试可以观察到,点击事件之后,页面又刷新了。
原因:a标签的href会导致默认人的页面跳转事件,如果为空值,就会刷新页面,所以就会出现上述的问题。可以改为href=’#’或者href=”javascript:;”等。或者使用e.preventDefault();解决。

另附上一个回答:

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 属性? 您可以使用以下语法将href属性添加到a标签中: <a href="链接地址">链接文本</a> 其中,链接地址是您想要链接到的网址,链接文本是您希望显示的文本。请注意,href属性必须添加到a标签中,否则链接将无效。 ### 回答2: 给a标签添加href,是为了给链接指定URL地址,让用户可以点击链接跳转到指定页面。以下是如何添加href的方法: 第一种方法是在a标签内部添加href属性,如下所示: <a href="URL地址">链接文本</a> 其中,URL地址是要跳转到的页面的网址,链接文本是在页面上显示的链接文字。 第二种方法是使用JavaScript动态添加href,如下所示: var link = document.createElement("a"); link.href = "URL地址"; link.innerHTML = "链接文本"; document.body.appendChild(link); 首先,我们使用document.createElement("a")创建了一个a标签的元素节点。然后,可以通过link.href = "URL地址"将href属性赋值为指定的URL地址,通过link.innerHTML = "链接文本"将内部的内容赋值为指定的链接文字。最后,使用document.body.appendChild(link)将a标签添加到页面中。 无论使用哪种方法,都需要将URL地址替换为实际要跳转的页面的网址,链接文本替换为希望在页面上显示的链接文字。通过这种方式,就可以给a标签添加href属性,实现链接跳转功能。 ### 回答3: 给<a>标签添加href属性是指通过在HTML代码中使用<a>标签来创建一个可点击的链接,并指定该链接的目标地址。 要给<a>标签添加href属性,首先需要在<a>标签的开始标签添加href属性,href属性用于指定链接的目标地址。例如: <a href="http://www.example.com">点击这里</a> 在这个例子中,我们将链接的目标地址设为了"http://www.example.com"。当用户点击"点击这里"时,浏览器会跳转到"http://www.example.com"这个网址。 可以使用相对路径或绝对路径来作为href的属性值。相对路径是相对于当前页面的路径,用于指向同一网站上的其他页面或文件。绝对路径是指向互联网上其他网站的链接。 如果要指向同一网站上的其他页面或文件,可以使用相对路径。例如: <a href="/otherpage.html">点击这里</a> 在这个例子中,我们使用了相对路径"/otherpage.html",浏览器会在当前网站的根目录中寻找名为"otherpage.html"的文件。如果该文件存在,则点击后会跳转到该文件。 如果要指向互联网上的其他网站,可以使用绝对路径。例如: <a href="https://www.example.com">点击这里</a> 在这个例子中,我们使用了绝对路径"https://www.example.com",浏览器会直接跳转到"www.example.com"这个网址。 通过给<a>标签添加href属性,可以实现在HTML页面中创建可点击的链接,方便用户跳转到其他页面或网站。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值