草庐IT

javascript - <a> 没有 href ="#"的脚本链接

coder 2023-07-05 原文

我的 Web 应用程序使用了很多 <a href="#">Perform client script action</a>用于脚本的 anchor 链接(这是我 10 多年前作为 Dreamweaver 用户时养成的习惯)，现在我开始怀疑这是否有必要。

我其实不知道为什么<a href="#">首先使用 - 我猜是 href 的存在属性导致浏览器应用 :link和 :visited简化样式表的伪类。它还使浏览器隐式应用 cursor: pointer可能需要的属性。

我使用 jQuery(在短暂使用 MooTools 之后)并且链接在没有 href="#" 的情况下也能正常工作属性和值，所以我应该完全删除该属性并修改我的样式表以补偿删除 :link伪类？还有什么我可能遗漏的吗，href 属性赋予 anchor 元素的任何一种半文档化的巫术？

最佳答案

<a>代表 anchor

如果您包含 [href] <a> 上的属性元素，它是一个指向某个位置的 anchor ，这意味着您可以转到新页面、当前页面的特定片段(因此 # 被称为片段标识符)或新页面的特定片段页面。

<a>没有 [href] 的元素属性在历史上被分配了 [name]属性，可用作片段标识符的目的地。浏览器后来添加了对链接到任何项目的 [id] 的支持。属性，现在这是链接到文档片段的首选方法。

这对独立版意味着什么 <a>元素？

安a[href]元素是一个链接(这就是它们与 css 中的 :link 匹配的原因)。 链接 是可点击的。 An a element without the [href] attribute is otherwise just a placeholder for where a link might otherwise have been placed ，并且不可点击，也不符合页面的 Tab 键顺序。

如果您希望您的链接可通过键盘导航，这对于可访问性 (WAI-ARIA) 很重要，您需要执行以下操作之一:

  • 将元素更改为<button type="button">
  • 保留[href]属性
  • 添加[tabindex="0"]和 [role="button"] 之一或 [role="link"] (可能还有一些样式)

有关 [role] 的更多信息属性可以在 the Roles Model section 中找到的 WAI-ARIA docs .

更改标记

如果您没有理由保留 [href]属性，您不妨使用 <button>元素:

<button type="button">
        ^^^^^^^^^^^^^

[type]属性用于使元素成为通用按钮，否则 <button>将默认为 [type="submit"] ，这可能是不可取的，因为它可能会触发表单提交。

如果您不能使用 <button> (通常发生在内部标记必须包含 <div> 时)您可以伪造 <button>使用:

<div role="button" tabindex="0">Some clickable text</div>

您需要监听 keypress事件和触发器 click Enter 和 Space 的事件。

保留标记

如果您保留 <a>元素及其 [href]属性，其值有多种选择。

真实链接

例如

  • <a href="/some/location/for/users/without/js">
  • <a href="#document-fragment">

如果您需要为禁用 JS 的用户提供支持，您不妨将他们引导至一个无需 JS 即可执行等效功能的页面。

通过扩展，这还包括提供文档片段链接以链接到同一文档中的内容。例如，可切换区域可以标记为:

<a href="#more" class="toggleable">Read More</a>
<div id="more">Lorem ipsum dolor sit amet</div>

因此，使用 JS 可以折叠和展开区域，如果没有 JS，链接将把用户带到页面上的适当内容。

无用的 href

例如

  • <a href="#">
  • <a href="javascript:void(0)">
  • <a href="about:blank">

如果您在 JavaScript 中阻止幕后的默认行为，并且您不支持禁用 JS 的用户，您可以使用“dud”href 值来保持链接的跳转顺序并自动启用Enter 触发click事件。您应该添加 [role="button"]作为语义 <a>标签不再用作链接，而是用作按钮。

<a href="#" role="button">Some clickable text</a>

关于javascript - <a> 没有 href ="#"的脚本链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11144653/

ampjavascriptcodehref34html

有关javascript - <a> 没有 href ="#"的脚本链接的更多相关文章

  1. ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2

    我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou

  2. ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  3. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

    我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

  4. ruby - 难道Lua没有和Ruby的method_missing相媲美的东西吗？ - 2

    我好像记得Lua有类似Ruby的method_missing的东西。还是我记错了？ 最佳答案 表的metatable的__index和__newindex可以用于与Ruby的method_missing相同的效果。 关于ruby-难道Lua没有和Ruby的method_missing相媲美的东西吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/7732154/

  5. ruby-on-rails - 如何从 format.xml 中删除 <hash></hash> - 2

    我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据，就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理？我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题；这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML，但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中，将我的XML代码修改为

  6. ruby - 检查 "command"的输出应该包含 NilClass 的意外崩溃 - 2

    为了将Cucumber用于命令行脚本，我按照提供的说明安装了arubagem。它在我的Gemfile中，我可以验证是否安装了正确的版本并且我已经包含了require'aruba/cucumber'在'features/env.rb'中为了确保它能正常工作，我写了以下场景:@announceScenario:Testingcucumber/arubaGivenablankslateThentheoutputfrom"ls-la"shouldcontain"drw"假设事情应该失败。它确实失败了，但失败的原因是错误的:@announceScenario:Testingcucumber/ar

  7. ruby-on-rails - rails 目前在重启后没有安装 - 2

    我有一个奇怪的问题:我在rvm上安装了ruby​​onrails。一切正常，我可以创建项目。但是在我输入“railsnew”时重新启动后，我有“程序'rails'当前未安装。”。SystemUbuntu12.04ruby-v"1.9.3p194"gemlistactionmailer(3.2.5)actionpack(3.2.5)activemodel(3.2.5)activerecord(3.2.5)activeresource(3.2.5)activesupport(3.2.5)arel(3.0.2)builder(3.0.0)bundler(1.1.4)coffee-rails(

  8. ruby-on-rails - 独立 ruby​​ 脚本的配置文件 - 2

    我有一个在Linux服务器上运行的ruby​​脚本。它不使用rails或任何东西。它基本上是一个命令行ruby​​脚本，可以像这样传递参数:./ruby_script.rbarg1arg2如何将参数抽象到配置文件(例如yaml文件或其他文件)中？您能否举例说明如何做到这一点？提前谢谢你。 最佳答案 首先，您可以运行一个写入YAML配置文件的独立脚本:require"yaml"File.write("path_to_yaml_file",[arg1,arg2].to_yaml)然后，在您的应用中阅读它:require"yaml"arg

  9. ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2

    我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem，所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re

  10. ruby-on-rails - rspec should have_select ('cars' , :options => ['volvo' , 'saab' ] 不工作 - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request

随机推荐