Question

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

例如，<a href="#">example 1</a>与<a href="javascript:;">example 2</a>。

Answer 1

您应该始终为没有Javascript的用户设置后备链接。调用javascript时，您可以从处理程序返回false以避免链接激活。例如：

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

如果没有适当的链接页面，则替代方法是根本不使用链接。请改用按钮。如果真的有必要的话，你可以把它设计成你的链接。

Answer 2

理想情况下，href应该尽可能接近javascript要做的事情。

例如，如果Javascript打算弹出一张图片较大的灯箱，href应该会带你到一个新的页面，在那里你可以看到更大的图片。

如果采用这种方法，没有javascript的人仍然可以获得良好的体验，使用javascript的人可以获得更流畅，更光滑的体验。

结帐Unobtrusive JavaScript和Progressive enhancement

Answer 3

正如其他用户所提到的，如果非javascript回退是可能的，那么将其用作你的href。

使用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>

Answer 4

你应该坚持使用rikh和DisgruntledGoat提到的内容，使你的网站可以用于javascript。

如果你想在没有javascript的情况下做一些不需要或不可能的事情，你应该使用<a href="#">example 1</a>并让你onclick-funktion return false以防止跳到页面顶部 - 但是最好的方式总是作为后备的“正常”链接。

显示不需要href的锚点的首选方法？

4 个答案: