59

对于我的网站，我将需要使用<span>而不是<a>，因为我主要使用 ajax，因此我将 onclick ajax 事件作为我的跨度中的属性而不是链接。

结果，我不得不手动设置跨度的样式，使其看起来像链接。我已经使用悬停并访问了伪类来更改背景和文本颜色，但是要将鼠标默认更改为悬停时的指针，我需要使用 javascript 吗？或者我可以使用 css 做到这一点吗？

另外，我刚刚意识到：无论如何，我不能只使用<a>标签而不是<span>，而只是代替 href，我会包含一个 onclick？它应该工作一样，不是吗？

4

9 回答 9

124 

span {
     cursor:pointer;
     color:blue;
     text-decoration:underline;
}
<a href="#">Hyperlink</a><br />
<span>Span</span>

此外，您可以:hover在悬停时使用伪类来设置元素的样式（您可以使用任何样式，而不仅仅是最初使用的样式）。例如：

span:hover {
     text-decoration:none;
     text-shadow: 1px 1px 1px #555;
}
于 2012-12-28T13:16:27.783 回答
15

请注意，如果您的网站是公开的，并且您指望搜索引擎来抓取您的网站，那么您会因为漏掉链接而损失很多，href因为蜘蛛在抓取您的页面时没有任何东西可以抓取。

您应该使用完整的链接 - 如果您的 javascript 发生故障，用户仍然能够浏览页面：

<a href="http://www.example.com">Link</a>

比您可以使用preventDefault()禁用与 jquery 的链接- 而且您完全分离了基本 html 和 javascript 部分，这意味着您的网站在没有 javascript 的情况下仍然可用。

比你不需要打扰跨度悬停和任何东西 - 但只是为了它

span:hover {
cursor:pointer;
}

将在悬停的跨度上启用悬停手形光标。

于 2012-12-28T14:06:09.157 回答
7

只需添加cursor:pointer;您的spanCSS。

于 2012-12-28T13:15:57.913 回答
7

选项1

只需使用anchor如下链接：

<a href="#" onclick="someFunction();"> Link </a>

选项2

我不知道您为什么要使用 span ，但如果您这样做，您可以使用以下样式使其看起来类似于锚链接。

span {
    color: #000000; /* Change this with links color*/
    cursor: pointer;
    text-decoration: underline;
}

span:hover {
    color: #444444; /* Change the value to with anchors hover color*/
}
于 2012-12-28T13:19:47.373 回答
4

使用 CSS 将光标显示为指针：

<span style="cursor: pointer;">Pseudolink</span>

http://jsfiddle.net/kkepg/

于 2012-12-28T13:16:10.070 回答
2

你可以使用锚。但是在javascript中你必须使用event.preventDefault()但是有一个更小更容易的CSS方法。保持你的跨度并使用它：

span:hover{
    cursor:pointer;
}
于 2012-12-28T13:16:25.307 回答
1

cursor: pointer您可以通过指定CSS 规则将光标更改为指针。

您也可以使用<a>标签代替<span>，事实上它们在屏幕阅读器和其他类似设备上表现得更好。如果您在处理程序中使用和JavaScript 函数，则无需省略该href属性。通过这种方式，您可以保留与非 JS 启用浏览器的某种程度的向后兼容性。preventDefault()stopPropagation()onClick

于 2012-12-28T13:19:33.797 回答
0

您可以使用按钮而不是 span 并使用引导 css 类将其设置为像链接一样的样式：

<button class="btn btn-link">Link</button>

它会像普通链接一样对 mouseOver 做出反应。运行代码片段以预览结果：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<button class="btn btn-link">this is my link styled with bootstrap</button>

于 2021-01-29T13:36:12.790 回答
-2

您可以使用 onClick 事件，但如果我没记错的话，您必须返回 false 以防止页面跳转；就像是：

<a href="#" onClick="myfunction();return false;">

或者：<a href="#" onClick="return myfunction();">只要myfunction返回 false。

您也可以直接从 href 调用 javascript，但您必须将结果强制转换为 void 以阻止浏览器尝试将结果作为有效链接：

<a href="javascript:void(myFunction())">

即使您仍然想使用 onClick 属性；替换它仍然是一个好主意href="#"主意href="javascript:void(0)" ...>。

其他人提到使用event.preventDefault()and stopPropagation()。我不记得曾经使用过其中之一，但我必须承认，自从我上次在 HTML 链接中编写一些 javascript 代码以来已经有很多年了；所以你绝对应该研究这两个功能的使用。

编辑：也许href="javascript:void(0)"有时使用 a 可能是个坏主意；见http://drupal.org/node/1193068。

于 2012-12-28T14:29:02.660 回答