Html 如何在不使用 javascript 的情况下将 span 设置为看起来像链接？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14070086/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do i style a span to look like a link without using javascript?
提问by user1787489
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.
对于我的网站，我需要使用<span>而不是<a>因为我主要使用 ajax，因此我将 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?
另外，我刚刚意识到......我不能只使用<a>标签而不是<span>，但只是代替href，我会包含一个onclick？它应该一样工作，不是吗？
回答by Dharman
span {
cursor:pointer;
color:blue;
text-decoration:underline;
}
Additionally you can use :hoverpseudo-class to style the element when hovered(you can use any styles not just the ones originally used). Ex.
此外，您可以:hover在悬停时使用伪类来设置元素的样式（您可以使用任何样式，而不仅仅是最初使用的样式）。前任。
span:hover {
text-decoration:none;
text-shadow: 1px 1px 1px #555;
}
回答by easwee
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 hrefsince spiders have nothing to grab on while crawling your page.
请注意，如果您的网站是公开的，并且您指望搜索引擎来抓取您的网站，那么您会因省略没有链接的链接而损失很多，href因为蜘蛛在抓取您的页面时没有什么可抓取的。
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.
将在悬停的跨度上启用悬停手形光标。
回答by Amyth
Option1
选项1
Just use an anchorlink as follows:
只需使用anchor如下链接：
<a href="#" onclick="someFunction();"> Link </a>
Option2
选项2
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*/
}
回答by Muhammad Bilal
Just add cursor:pointer;in your spancss.
只需添加cursor:pointer;您的spancss。
回答by bashleigh
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;
}
回答by Stefan Neubert
Use CSS to display the cursor as a pointer:
使用 CSS 将光标显示为指针：
<span style="cursor: pointer;">Pseudolink</span>
回答by Kaivosukeltaja
You can change the cursor to a pointer by specifying the cursor: pointerCSS rule.
您可以通过指定cursor: pointerCSS 规则将光标更改为指针。
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 hrefattribute if you use the preventDefault()and stopPropagation()JavaScript functions in the onClickhandler. This way you can retain some level of backward compatibility with non-JS enabled browsers.
您也可以使用<a>标签来代替<span>，事实上它们在屏幕阅读器和其他类似设备上表现得更好。href如果在处理程序中使用preventDefault()和stopPropagation()JavaScript 函数，则不需要省略该属性onClick。通过这种方式，您可以保留与不支持 JS 的浏览器的某种程度的向后兼容性。
回答by SylvainL
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 myfunctionwill return false.
或：<a href="#" onClick="return myfunction();">前提是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)"有时使用 a可能是个坏主意；见http://drupal.org/node/1193068。
