< a取代;脚本链接无href =“＃” [英] <a> script links without href="#"
问题描述
我的web应用程序使用很多< a href =＃>执行客户端脚本操作< / a> 用于脚本编写的锚链接习惯我从十几年前的Dreamweaver用户那里接受了我的日子），现在我开始怀疑这是否有必要。
我没有实际上知道为什么首先使用< a href =＃> - 我的猜测是存在 href 属性会导致浏览器应用简化样式表的：link 和：visited psuedo-classes。它也使浏览器隐式应用 cursor：pointer 属性，这可能是可取的。
href =＃属性和值，所以我应该完全删除该属性并修改我的样式表为补偿删除：link psuedo-class？还有什么我可能会失踪的，任何一种半文件化的voodoo，href属性都会产生锚元素？
如果您包含 [href] code>< $> 元素上的code>属性，它是一个指向位置的锚点，这意味着您可以转到新页面，当前页面的片段（因此＃被称为片段标识符）或新页面的特定片段。
没有 [href] 属性的
[name] 属性，它可以用作片段标识符的目的地。浏览器稍后添加了对链接到任何项目的 [id] 属性的支持，现在这是链接到文档片段的首选方法。
这对于独立< a> 元素是什么意思？
An a [href] 元素是一个 link （这就是为什么它们与css中的：link 匹配）。 链接是可点击的。 a [href] 属性的c>元素就是一个占位符，用于链接可能被放置的位置，而不是可点击的，它们也不在如果你希望你的链接是键盘导航，这对于可访问性是很重要的（ WAI-ARIA ），您需要执行以下操作之一：
< button type =button>
属性 [tabindex =0] code> [role =button] 或 [role =link] （也可能是一些样式）
有关 [角色] 属性的更多信息可以在角色莫 WAI-ARIA文档中的部分。
更改标记
如果您没有理由保留 [href] 属性，你也可以使用<按钮> 元素：
< button type =button>
^^^^^^^^^^^^^
[type] 属性用于使元素成为通用按钮，否则< button> 将默认为 [type =submit] ，这可能不合意，因为它可能会触发表单提交。
如果您不能使用< button> （通常在内部标记必须包含< div> 时发生），您可以伪造< button> 使用：
< div role =button tabindex =0>一些可点击的文字< / div>
您需要监听按键事件和触发点击 Enter 和空间的事件。
< h2>保留标记
如果您保留< a> 元素及其 [href] 属性，它的值有很多选项。
一个真正的链接
Ex
-
< a href =/ some / location / for / users / without / js> -
< a href =＃document-fragment>
如果您需要为禁用JS的用户提供支持，那么您最好将它们引导至执行等效功能的页面JS。
通过扩展，这还包括提供文档片段链接以链接到同一文档中的内容。例如，可切换区域可以标记为：
< a href =＃moreclass =toggleable >了解详情< / a>
< div id =more> Lorem ipsum dolor sit amet< / div>
因此，使用JS可以折叠和展开区域，并且不使用JS链接将使用户
A dud href
Ex
-
< a href =＃> -
< a href =javascript：void（0）> -
< a href =about ：blank>
如果您在JavaScript中阻止默认行为，并且您不支持禁用JS的用户，则可以使用dudhref值将链接保留为Tab键顺序，并自动启用 Enter 触发点击事件。你应该 [role =button] 标记不再被用作链接，而是作为一个按钮。
< a href =＃role =按钮>一些可点击的文字< / a>
My web application uses a lot of <a href="#">Perform client script action</a> anchor links which are used for scripting (a habit I picked-up from my days as a Dreamweaver user well over 10 years ago) and now I'm beginning to question if this is necessary.
I don't actually know why <a href="#"> is used in the first place - my guess is the presence of the href attribute causes browsers to apply the :link and :visited psuedo-classes which simplifies stylesheets. It also makes the browser implicitly apply the cursor: pointer property which may be desirable.
I use jQuery (after a brief stint with MooTools) and the links work just as well without the href="#" attribute and value, so should I just remove the attribute entirely and modify my stylesheet to compensate for the removal of the :link psuedo-class? Is there anything else I might be missing, any kind of semi-documented voodoo that the href attribute imbues the anchor element?
<a> stands for anchor
If you include the [href] attribute on an <a> element, it is an anchor that points to a location, which means that you could go to a new page, a particular fragment of the current page (hence the # being called the fragment identifier), or a particular fragment of a new page.
<a> elements without an [href] attribute were historically assigned a [name] attribute, which could be used as the destination of the fragment identifier. Browsers later added support for linking to any item's [id] attribute, and this is now the preferred method for linking to a document fragment.
What does this mean for standalone <a> elements?
An a[href] element is a link (which is why they are matched with :link in css). links are clickable. An a element without the [href] attribute is otherwise just a placeholder for where a link might otherwise have been placed, and not clickable, nor are they in the tabbing order of the page.
If you want your links to be keyboard navigable which is important for accessibility (WAI-ARIA), you'll need to do one of the following:
- change the element to
<button type="button"> - keep the
[href]attribute - add
[tabindex="0"]and one of[role="button"]or[role="link"](and possibly some styling)
More information about the [role] attribute can be found in the Roles Model section of the WAI-ARIA docs.
Changing the markup
If you don't have a reason to keep the [href] attribute, you might as well be using a <button> element:
<button type="button">
^^^^^^^^^^^^^
The [type] attribute is used to make the element a generic button, otherwise <button> will default to [type="submit"], which may not be desirable as it could trigger form submission.
If you can't use a <button> (usually occurs when the inner markup must contain a <div>) you can fake a <button> using:
<div role="button" tabindex="0">Some clickable text</div>
You'll need to listen for keypress events and trigger click events for Enter and Space.
Keeping the markup
If you're keeping the <a> element and its [href] attribute, there are a number of options for its value.
A real link
E.x.
<a href="/some/location/for/users/without/js"><a href="#document-fragment">
If you need to provide support for users with JS disabled, you might as well direct them to a page that performs equivalent functionality without JS.
By extension, this also includes providing document fragment links to link to the content within the same document. For example, a toggleable region may be marked up as:
<a href="#more" class="toggleable">Read More</a>
<div id="more">Lorem ipsum dolor sit amet</div>
So that with JS the region can be collapsed and expanded, and without JS the link will take the user to the appropriate content on the page.
A dud href
E.x.
<a href="#"><a href="javascript:void(0)"><a href="about:blank">
If you're preventing the default behavior behind-the-scenes in JavaScript, and you're not supporting users with JS disabled, you can use a "dud" href value to keep the link in the tabbing order and automatically enable Enter to trigger the click event. You should add [role="button"] as semantically the <a> tag is no longer being used as a link, but as a button.
<a href="#" role="button">Some clickable text</a>
这篇关于< a取代;脚本链接无href =“＃”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
