使用onclick创建一个可点击的链接,但没有href =#？

Question

我的页面上有一组可点击的标识符.大约有一百个,比如'cat1','cat2','dog1','dog2','dog3'等等.然后我有一个function IDClick(id) {}

我需要在HTML中点击这些标识符,以实现我用过的<a>标签onclick

<a onclick=IDClick(id)>id</a>

现在它可以工作,但是当光标悬停在可点击元素上时光标不会改变.

所以我尝试添加 href=#

<a href=# onclick=IDClick(id)>id</a>

现在光标没问题,但是当我点击该项时,浏览器位置栏中的URL将会改变.这是不希望的.

如何获得混合行为？

我也不需要下划线.

Answer 1

您需要阻止浏览器执行默认操作.

<a href="#" onclick="IDClick(id);event.preventDefault();">id</a>

单击链接时,默认操作是转到该地址. event.preventDefault();阻止浏览器执行默认操作.

Answer 2

您可以使用CSS强制光标在可点击元素的悬停时更改:

.myClickableThingy {
    cursor: pointer;
}

然后你可以<span>在<a>标签之前切换回s或者你正在使用的任何元素.

Answer 3

给您的锚元素一个类并为其设置样式以实现所需的功能：

<a class='kinda-link' onclick='whatevs()'>Hi I'm a kinda-link</a>

和你的CSS：

a.kinda-link:hover { cursor: pointer; }