可点击的Div - Wrap锚链接还是使用JS？

Question

我有一个相当复杂的动态Div类列表，其中包含各种nexted div来显示商店内容 - 整个事物需要有一个悬停状态并且可以点击（它目前有应用悬停样式）并且可以访问。

我想我可以通过 -

来解决这个问题

1 - 将包含的Div设置为Anchor链接并相应地设置样式

2 - 在div类中嵌套一个锚标记并编写一个JS函数，以便在单击包含div时触发锚点击。

关于哪种方法是正确的方法？

Answer 1

我肯定会使用包裹<a>，在这种情况下，您不必考虑设置tabIndex=0，role=link，也可以跳过添加额外的JavaScript来制作按钮可单击并绑定相同操作的回车键。

或者，如果“链接”没有将用户带到另一个位置，只显示一个模态窗口或其他一些奇特的功能，你应该用<div>包裹<button>，在这种情况下，你也可以跳过将空格键绑定到操作，因为它是继承的。 （但如果你真的不能这样做，你应该将role=button添加到包裹<a>）

现在您可以专注于样式并记住同时使用:hover和:focus

Answer 2

将＆lt; div＆gt;设为＆lt; div＆gt;通过添加“onclick”处理程序可单击。但是，您应指定ARIA“角色”属性（例如role =“button”或role =“link”）以及指定“tabindex”属性（tabindex =“0”）以使元素成为可能使用键盘上的标签按钮时对焦。