如何在不使用javascript的情况下使span看起来像一个链接?

For my website i'll need to use <span> instead of <a> because i'm using mostly ajax and thus instead of links i have onclick ajax events as attributes in my spans.

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

As a result, i've had to manually style the spans to look like links. I've used hover and visited pseudo classes to change background and text colour, but to change the mouse default to a pointer finger on hover, will i need to use javascript? Or can i do that using css?

因此，我不得不手工设计跨度，使其看起来像链接。我使用了鼠标悬停和访问伪类来改变背景和文本颜色，但是要将鼠标默认设置为鼠标指针悬停，我需要使用javascript吗?或者我可以用css来做吗?

Also, i've just realized...couldnt i just use the <a> tag anyways instead of <span>, but just instead of an href, i would include an onclick? It should work just the same, no?

同时,我才意识到…难道我就不能用标签而不是，而是用onclick代替href ?它应该是一样的，不是吗?

8 个解决方案

#1

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

Additionally you can use :hover pseudo-class to style the element when hovered(you can use any styles not just the ones originally used). Ex.

此外，您还可以使用:悬停伪类在hohover(您可以使用任何样式，而不仅仅是最初使用的样式)时对元素进行样式化。前女友。

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

Example

例子

#2

Note that if your website is public and you are counting on search engines to crawl your site, you lose a lot by leaving out links without href since spiders have nothing to grab on while crawling your page.

请注意，如果你的网站是公开的，你指望搜索引擎来抓取你的网站，那么你就会失去很多，因为在你抓取网页时，蜘蛛没有东西可以抓取。

You should use a complete link - in case your javascript breaks down the user is still able to navigate through pages:

您应该使用完整的链接—如果您的javascript崩溃，用户仍然能够在页面中导航:

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

than you can disable the link with jquery by using preventDefault() - and you totally separated base html and the javascript part, meaning your site is still usable without javascript on.

通过使用preventDefault()禁用jquery链接——您将基本html和javascript部分完全分离，这意味着您的站点在没有使用javascript的情况下仍然可用。

Than you don't need to bother with span hover and anything - but just for the sake of it

你不需要花太多时间在悬停和任何东西上——但只是为了它。

span:hover {
cursor:pointer;
}

will enable hover hand cursor on hovered span.

将使悬停光标在悬空的范围内。

#3

Just add cursor:pointer; in your span css.

把光标:指针;在你的css。

#4

You could use an anchor. But within javascript you'd have to use event.preventDefault() But there is a CSS method thats smaller and easier. Keep your span and use this:

你可以用锚。但是在javascript中，您必须使用event.preventDefault()，但是有一种CSS方法更小、更简单。保持你的空间和使用这个:

span:hover{
    cursor:pointer;
}

#5

Option1

Just use an anchor link as follows:

只需使用锚链接如下:

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

Option2

I don't know why you would wanna use span , but if you do you can do the following styles to make it look similar to an anchor link.

我不知道为什么你想要使用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*/
}

#6

Use CSS to display the cursor as a pointer:

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

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

http://jsfiddle.net/kkepg/

http://jsfiddle.net/kkepg/

#7

You can change the cursor to a pointer by specifying the cursor: pointer CSS rule.

可以通过指定游标:指针CSS规则将游标更改为指针。

You can also use <a> tags instead of <span>, in fact they can behave nicer with screen readers and other similar devices. You don't need to leave out the href attribute if you use the preventDefault() and stopPropagation() JavaScript functions in the onClick handler. This way you can retain some level of backward compatibility with non-JS enabled browsers.

您还可以使用标记而不是，事实上它们可以在屏幕阅读器和其他类似设备上表现得更好。如果在onClick处理程序中使用preventDefault()和stopPropagation() JavaScript函数，则不需要省略href属性。通过这种方式，您可以保留一些与非js支持的浏览器的向后兼容性。

#8

You can use an onClick event but if I remember correctly, you must return false in order to prevent your page from jumping around; something like:

你可以使用onClick事件，但如果我没记错，你必须返回false，以防止你的页面乱跳;喜欢的东西:

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

or: <a href="#" onClick="return myfunction();"> provided that myfunction will return false.

或:提供myfunction将返回false。

You can also directly call a javascript from href but you must cast the result to void in order to block to the browser to try to follow the result as a valid link:

您也可以直接从href调用一个javascript，但是您必须将结果转换为void，以便阻塞到浏览器，试图以有效链接的形式跟踪结果:

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

Even if you still want to use the onClick property; it would still be a good idea to replace the href="#" with href="javascript:void(0)" ...>.

即使你仍然想使用onClick属性;用href="#"替换为href="javascript:void(0)"仍然是个好主意…>。

Other people have mentionned using the event.preventDefault() and stopPropagation(). I don't remember ever using one of these but I must admit that it has been many years since the last time that I have coding some javascript in a HTML link; so you should definitely investigate the use of these two functions.

其他的人提到使用event.preventDefault()和stopPropagation()。我不记得曾经使用过其中的一个，但我必须承认，自从上次我在HTML链接中编写javascript代码以来，已经很多年了;所以你一定要研究这两个函数的用法。

EDIT: maybe that using a href="javascript:void(0)" could be a bad idea sometimes; see http://drupal.org/node/1193068 .

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