我一直在使用TwitterBootstrap构建网站,其许多功能都依赖于将内容包装在中<a>,即使它们只是执行Javascript也是如此。我在href="#"Bootstrap文档所建议的策略上遇到了问题,因此我试图寻找其他解决方案。
<a>
href="#"
但是后来我尝试完全删除该href属性。我一直在使用<a class='bunch of classes' data- whatever='data'>,并让Javascript处理其余部分。而且有效。
href
<a class='bunch of classes' data- whatever='data'>
但是有件事告诉我我不应该这样做。对?我的意思是,从技术上讲,<a>它应该是某事的链接,但我不确定是 为什么 这是一个问题。还是?
所述<a>nchor元件仅仅是一个锚,或从一些内容。最初,HTML规范允许使用命名锚(<a name="foo">)和链接锚(<a href="#foo">)。
<a name="foo">
<a href="#foo">
命名锚格式不太常用,因为片段标识符现在用于指定[id]属性(尽管为了向后兼容,您仍然可以指定[name]属性)。没有属性的<a>元素[href]仍然有效。
[id]
[name]
[href]
就语义和样式而言,除非<a>元素:link具有[href]属性,否则它不是链接()。这样做的副作用是,默认情况下,没有的<a>元素不会[href]处于Tab键顺序。
:link
真正的问题是<a>元素本身是否是的适当表示<button>。在语义级别上,a link和a 之间存在明显区别button。
<button>
link
button
按钮是单击后导致动作发生的东西。
链接是一个按钮,可导致当前文档中的导航发生变化。如果是片段标识符(#foo),则发生的导航可能是在文档内移动;如果是url(/bar),则发生的导航可能是移动到新文档。
#foo
/bar
由于链接是一种特殊类型的按钮,因此通常会将它们的动作改写为执行其他功能。从一致性的角度来看,可以继续使用锚点作为按钮是可以的,尽管从语义上来说并不十分准确。
如果您担心使用<a>元素(或<span>,或<div>)作为按钮的语义和可访问性,则应添加以下属性:
<span>
<div>
<a role="button" tabindex="0" ...>...</a>
该按钮的作用告诉该特定元素被视为一个按钮作为用于任何语义底层元件可能有一个覆盖该用户。
对于<span>和<div>元素,你可能要添加JavaScript键侦听器Space或Enter触发该click事件。<a href>和<button>元素默认情况下会执行此操作,但非按钮元素则不会。有时将click触发器绑定到其他键更有意义。例如,Web应用程序中的“帮助”按钮可能已绑定到F1。
Space
Enter
click
<a href>
F1