使用链接标签 (<a>) 的 href 来标识操作答案

【问题标题】：Use href of a link tag (<a>) to identify the operation使用链接标签 (<a>) 的 href 来标识操作
【发布时间】：2011-09-16 12:34:24
【问题描述】：

我将标签设置为按钮，并用它代替<button> 或<input submit> 标签。

为了标识一个操作，我使用 href 属性，例如：

<a href='update'>Update</a>
<a href='delete'>Delete</a>

然后使用 jQuery： $('a[href="update"]').click(function() { ... });

效果很好。当给定链接充当表单上的提交按钮时，我还使用 href 属性作为“操作”参数的值。

现在问题 - 搜索引擎会因为我有盲链接而惩罚我吗？（我想是的）。
我该如何解决？改用#update？我不能使用id 属性，因为可能有多个按钮执行相同的操作。

注意：点击处理程序可以使用类来连接，这很方便。所以我宁愿不使用id 将多个按钮连接到同一个处理程序。

<!-- inside a form -->
<a href='update' class='submit-button'>Update</a>

<!-- inside $(function() { .. });
$('a.submit-button').click(function() {
    // 1. get href of the clicked link : href = $(this).attr('href');
    // 2. add <input hidden> to the form: <input type='hidden' name='operation' value='<href>'/>
    // 3. submit form : $(this).parents('form').submit();
});

【问题讨论】：

关于ajax页面和爬取的有趣文章（同样前提，JS接管“传统”浏览器事件）：seomoz.org/blog/how-to-allow-google-to-crawl-ajax-content

标签： jquery seo

【解决方案1】：

您应该使用“#update”或“#insert”，但您应该使用类属性来区分它们。单个元素可以有多个类吗？与 ID 属性不同的是，可以在整个文档中使用多个相同的类。

<a href="javascript:void(0);" class="update_buton submit_button">Update</a>

然后您就可以这样做了：

$('.update_button').click(function(e)
{
  // Do something here
});

如果您需要能够区分点击了哪种类型的“submit_button”，您可以这样做：

$('.submit_button').click(function(e)
{
  // Common code up here

  if ( $(this).hasClass('.update_button') )
  {
    // Update here
  }
  else if ( $(this).hasClass('.other_button') )
  {
    // Other action here
  }

  // More common code down here
});

【讨论】：

几乎就是我写的差不多了！
+1 for pointing javascript:void(0); - 对 SEO 友好吗？
虽然我建议使用 jQuery 元数据插件来指定一个操作（假设该操作只需要包含在 POST 中，否则所有操作都以相同的方式处理）。

【解决方案2】：

为什么不直接使用另一个属性并保持简单？

<a href="#" data-action="update">Update</a>
<a href="#" data-action="delete">Delete</a>

你可以使用任何你想要的东西，尽管使用data- 符合 HTML5 标准。但是非标准标签无论如何都会被每个浏览器忽略，除了验证失败之外没有其他缺点。

【讨论】：

我应该使用href="#"还是href="javascript:void(0)"？
我喜欢你的建议。但是我对在 HTML4 世界中使用 HTML5 感到不安。此外，验证失败会降低一个人的 epeen 价值。
对于您的第一条评论：我认为普遍的共识是“#”——这个问题不时出现。这并不重要 - # 至少更简洁。对于您的第二个问题，epeen 是一个考虑因素。同时，HTML/Javascript/The Entire WWW 是一个巨大的 hack，拼凑了 20 多年。它的许多“标准”都是从黑客开始的。它的效果和它一样好是一个奇迹。如果您害怕偶尔抛出自定义属性，那么您可能也相信优雅降级和支持 LYNX。那时我们几乎没有什么可讨论的。
对不起，我的意思是“渐进式增强”而不是“优雅降级”:) 不完全一样，但总的来说，我的意思是您的网站将在 Netscape 2.0 中运行。
我喜欢数据操作，但我认为它可能会吓坏我身后的其他工程师，他们还不太习惯这种结构。 href="#" 是我的滚动方式。

【解决方案3】：

如果锚点未指向实际资源，请勿使用href 属性。

使用id 属性来识别操作：

<a id="delete-017" class="delete-button">Item No. 17</a>

顺便说一句，这就是 Stack Overflow 的做法……（“链接”、“标记”、“删除”、“编辑”按钮）

【讨论】：

这个方法比使用data-稍微复杂一点，不知道为什么SO会这样。

【解决方案4】：

我怀疑你会因为使用 href="#" 或 href="#update" 又名盲链接而受到惩罚。

我对 SEO 的理解是爬虫会爬取资源，否则不会。然后计算爬取/缓存内容与搜索关键字的相关性。

您在表单页面上真正拥有多少可搜索内容？您甚至希望爬虫为该内容编制索引吗？我会说您可能在表单上没有太多可搜索的内容，而且您可能也不想抓取这些页面。

关于如何标记您的代码以便您可以使用 jquery 找到它，我相信 Francois Deschenes 有最好的答案。

将 css 用于 jquery 钩子，将 href 用于它是什么......指向资源的指针。

【讨论】：