不需要 href 的锚点的首选显示方式是什么？

Question

什么是显示不需要href属性的锚点的首选方法（因为它仅在javascript中使用）？

例如，<a href="#">example 1</a>与<a href="javascript:;">example 2</a>相比，哪一个更好？

- Sam

---

JavaScript链接的href属性应该设置为"javascript:void(0);"，以避免出现跳转。 - stefanglase

Answer 1

对于没有启用Javascript的用户，您应该始终设置一个回退链接。在调用Javascript时，您可以从处理程序中返回false以避免链接激活。例如：

<a href="page.html" onclick="doSomething(); return false;">example 1</a>

如果没有适当的页面可以链接，另一种选择是不使用链接。使用按钮代替。如果必要的话，您可以将其样式设置为与您的链接相似。

- DisgruntledGoat

Answer 2

理想情况下，href应该尽可能地实现与javascript相同的功能。例如，如果Javascript将弹出一个带有更大图片的灯箱，则href应该带您到一个新页面，您可以在那里查看相同的更大图片。采用这种方法，没有Javascript的人仍然可以获得良好的体验，而有Javascript的人则可以获得更平滑、更光滑的体验。请查看不显眼的JavaScript和渐进增强。

- Rik Heywood

Answer 3

正如其他用户所提到的，如果可以使用非JavaScript回退，则请使用href。

以下是一个示例，对于具有JavaScript的用户，在弹出窗口中打开图像，而对于没有JavaScript的用户则回退到常规页面加载（使用jQuery）：

<a class="popup" href="path/to/image.png">Baby Llama Picture</a>

<script>
   // Assuming a function called popUpImage does the magic

   $('.popup').click(function(event) {
      popUpImage($(this).attr('href'));
      event.preventDefault();
   });
</script>

任何在没有javascript的情况下没有用处的链接都应该使用javascript注入到页面中。这样，没有javascript的用户将永远不会看到它们，也无需提供有效的href。

动态插入仅使用javascript链接的示例（使用jQuery）：

<img class="editable" src="baby-llama.png" />

<script>
  // Assuming a function doEditing that allows javascript based editing of an image

  $(function() {
    $('.editable').each(function() {
      var editable = $(this);

      var editLink = $('<a href="">Edit image</a>');
      editLink.click(function() {
        doEditing(editable);
      });
      editable.insertAfter(editLink);
    });
  });
</script>

- Karl

Answer 4

你应该遵循Rikh和DisgruntledGoat提到的方法，使你的网站对没有JavaScript的人可用。

如果你想做一些没有JavaScript不需要或不可能实现的事情，你应该使用<a href="#">示例1</a>，并让你的onclick函数return false以防止跳转到页面顶部 - 但最好的方式始终是作为后备的“正常”链接。

- oezi