选项1

Question

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

因此，我不得不手动设置跨度样式以显示链接。我已经使用悬停和访问的伪类来改变背景和文本颜色，但是要在悬停时将鼠标默认更改为指针，我是否需要使用javascript？或者我可以使用css吗？

另外，我刚刚意识到......不管怎么说我只使用<a>标签而不是<span>，但是我只想包含一个onclick？它应该是一样的，不是吗？

Answer 1

span {
     cursor:pointer;
     color:blue;
     text-decoration:underline;
}

此外，您可以使用:hover伪类来悬停元素的样式（您可以使用任何样式，而不仅仅是最初使用的样式）。防爆。

span:hover {
     text-decoration:none;
     text-shadow: 1px 1px 1px #555;
}

Example

Answer 2

请注意，如果您的网站是公开的，并且您依靠搜索引擎来抓取您的网站，那么在没有href的情况下遗漏链接会导致丢失很多，因为蜘蛛在抓取您的网页时无法抓住。

您应该使用完整的链接 - 如果您的javascript出现故障，用户仍然可以浏览网页：

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

你可以使用preventDefault()禁用jquery的链接 - 你完全将基本的html和javascript部分分开，这意味着你的网站在没有javascript的情况下仍然可用。

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

span:hover {
cursor:pointer;
}

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

Answer 3

只需在cursor:pointer; css中添加span。

Answer 4

选项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*/
}

Answer 5

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

span:hover{
    cursor:pointer;
}

Answer 6

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

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

http://jsfiddle.net/kkepg/

Answer 7

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

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

Answer 8

您可以使用按钮而不是 span 并使用 bootstrap 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>

Answer 9

您可以使用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()和stopPropagation()。我不记得曾经使用其中的一个，但我必须承认，自从我最后一次在HTML链接中编写一些javascript以来已经很多年了;所以你一定要研究这两个函数的使用。

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

如何在不使用javascript的情况下将跨度设置为链接？

9 个答案:

选项1

选项2