Question

我有一个充当菜单的元素列表（不是网站的导航，我已经排除了使用菜单标签，因为它支持有限）：

<ul>
    <li><img src="open-file.png"></li>
    <li><img src="delete-file.png"></li>
    ....

当你点击每一个时，javascript会做一些事情。

如果每个li都包含一个按钮标记，那么最好的标记是什么：

<li><button><img src="open-file.png"></button></li>

或者每个李应该是一个锚：

<li><a href="#"><img src="open-file.png"></a></li>

还是其他什么？

这里的语义是正确的吗？

Answer 1

Unobtrusive JavaScript的通常规则适用。

从有效的方法开始。用JS逐步增强它。

你能回到链接吗？即如果JS失败，那么关注链接会是一个合理的后备吗？如果是这样：使用链接。

（<a href="#">，这是一个指向页面顶部的链接，对于JS之外的其他所有内容都是一个糟糕的解决方案，可以将浏览器平滑地滚动到页面顶部。）

您可以回复表单提交吗？即如果JS失败了，你能通过简单的提交表单获得类似的效果吗？使用表单中的提交按钮。

没有办法可以回退到没有JavaScript的东西吗？使用按钮。

理想情况下，使用JS生成该按钮，这样就不会向那些肯定无法使用的人显示。

<img src="open-file.png">

暂且不说。控件的唯一内容是图像，您必须将控件的功能传达给用户，因此您确实应该an alt attribute。

Answer 2

从语义上讲，这取决于。你提到单击其中一个菜单项会触发一些JavaScript，所以我猜测更多的语义方法是使用按钮而不是锚标签。这就是推理：

锚标记用于将用户导航到资源或文档

按钮用于其他操作，例如以某种方式更改当前页面的状态（提交或重置表单等）。

请参阅David Walsh的this文章。

Answer 3

首先，由于我是StackOverflow的新手，我不确定这是否是正确的方法。

昆顿上面的回答很好。您应该考虑这些控件将执行的操作，并使用适当的链接进行非JS支持。有足够多的人觉得JS关闭以保证更加舒服。

至于处理JavaScript，类是如上所述的好方法。要扩展它，您还可以为每个元素提供多个类。例如：

<li class="MenuItem"><a herf="/path/to/action" class="MenuAction MenuAction_Open">(text or image here)</a></li>

通过这种方式，您可以使用类来执行特定的菜单操作，同时还可以使用CSS来统一样式化。

我还建议你看看JQuery。如果你要做很多JavaScript，它会让这个过程变得更加简单。

这里有一个很好的JQuery教程：W3 Schools

Answer 4

前端开发世界（IMO）的普遍共识是在元素中添加类，然后应用监听器。

有一个备用链接，可以在没有JavaScript的情况下运行您的操作（如果您愿意的话 - 将#null放入href只会使它无效），然后将event.preventDefault();添加到事件中以防止它们发生从执行导航到其他页面的默认操作，以便您的JavaScript可以运行。

示例HTML：

<ul>
    <li><a href="?action=open" class="open"><img src="open-file.png" alt="Open File" /></a></li>
    <li><a href="?action=close" class="delete"><img src="delete-file.png" alt="Delete File" /></a></li>
</ul>

示例jQuery：

$('li.open').on('click', function(event) {
    event.preventDefault();
    console.log('Open clicked');
});
$('li.delete').on('click', function(event) {
    event.preventDefault();
    console.log('Delete clicked');
});

示例原始JavaScript：

document.getElementsByClassName('open')[0].addEventListener('click', function(event) {
    event.preventDefault();
    console.log('Open clicked');
});
document.getElementsByClassName('delete')[0].addEventListener('click', function(event) {
    event.preventDefault();
    console.log('Delete clicked');
});

正确的菜单标记（不是导航）

4 个答案: