logo标签列表

如何将div标签转换为链接？

htmlanchor
20

如何将一个div标签转换为链接？我想让整个div可点击。

3
请查看https://dev59.com/pXRA5IYBdhLWcg3w4R_o，@thepeer提供了目前最好的解决方案。 - Bongs
10个回答
19

JS：

<div onclick="location.href='url'">content</div>

jQuery：

$("div").click(function(){
   window.location=$(this).find("a").attr("href"); return false;
});

确保这些DIV使用cursor:pointer

3
如果我没有误解jQuery示例，那么HTML结构应该是这样的：<div><a href="yourlinkhere">Your link text</a></div>。 - Seh Hui Leong
是的，那可能是更好的做法。我只是把它发表为一个选择性方案。 - eozzy
16
如果您正在使用HTML5，如此问题中所指出的，您可以将div放置在a内部：
<a href="http://www.google.com"><div>Some content here</div></a>

建议使用这种方法，因为它可以清楚地表明您的结构中所有内容都是可点击的，并且指向何处。

它可以正常工作，但如果您更关注SEO目的和性能，这种方法并不是很好。因为根据语义语法，我们不能将块级元素放入内联元素中。所以请告诉我正确的答案。 - Nadeem Khan
2
@NadeemKhan 从HTML5开始，锚点可以包含其他元素。请查看此其他问题，参考文档中的锚点更改：http://w3c.github.io/html-reference/a.html#a-changes - Rael Gugelmin Cunha
请访问上述链接并阅读有关将块级元素放入内联元素的错误。我敢肯定这会影响SEO，因为根据内容模型，如果您想制作出色的网站，就必须注意这些事情。你同意我的观点吗？ - Nadeem Khan
1
我给了你官方的HTML 5文档链接，还有一个StackOverflow上的解释，告诉你你的观点已经过时了（在HTML4时代是有效的）。任何好的网络爬虫都会跳过大部分标签，解析链接和文本内容。 - Rael Gugelmin Cunha
12
如果您必须将锚标签设置在div内部，您也可以使用CSS通过display:block的方式将锚设置为填充整个div。

像这样：

<div style="height: 80px"><a href="#" style="display: block">Text</a></div>

现在，当用户将光标悬停在该div中时，锚点标记将填充该div。

1
在Firefox 3.5和IE8中，我必须为锚标签添加“height: 100％;”才能占用整个DIV高度。这是一种很好的替代JavaScript解决方案。 - Seh Hui Leong
1
这是最简单和最符合SEO的答案。 - Arturo
10

所以你想让一个元素变成它本来不是的样子？

一般来说这不是一个好主意。如果你需要一个链接，就使用一个链接。大多数情况下，最好只是在适当的地方使用相应的标记。

所有这些都说了，有时候你必须打破规则。现在，问题中没有，因此我将在这里放置免责声明：

如果没有使用链接（或等效物，如仅包含提交按钮的<form>），或使用JavaScript，则无法使<div>作为链接起作用。

从现在开始，本答案将假设允许使用JavaScript，并且正在使用jQuery（为了简洁起见）。

有了这些，让我们深入探讨何为链接。

链接通常是你点击的元素，以便将你导航到一个新文档。

看起来很简单。监听点击事件并更改位置：

不要这样做 

$('.link').on('click', function () {
  window.location = 'http://example.com';
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="link">Fake Link</div>

这里有一个例子，<div>现在成为了一个链接。等等...什么？无障碍性怎么办？哦对了，屏幕阅读器和辅助技术用户无法点击该链接，特别是如果他们只使用键盘。
修复这个问题非常简单，让仅使用键盘的用户可以聚焦到<div>上，并在按下Enter时触发点击事件: 也不要这样做 

$('.link').on({
  'click': function () {
    window.location = 'http://example.com';
  },
  'keydown': function (e) {
    if (e.which === 13) {
      $(this).trigger('click');
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="link" tabindex="0">Fake Link</div>

再次强调，这个<div>现在是一个链接。等等...还有无障碍问题？哦，好吧，事实证明，辅助技术还不知道这个<div>是一个链接，所以即使你可以通过键盘到达那里，用户也不知道该怎么做。
幸运的是，有一个属性可以用来覆盖HTML元素的默认角色，这样屏幕阅读器等就知道如何对自定义元素进行分类，例如我们这里的<div>。当然，该属性是[role]属性，它很好地告诉屏幕阅读器我们的<div>是一个链接： 呃，每分钟都在变得更糟 

$('[role="link"]').on({
  'click': function () {
    window.location = 'http://example.com';
  },
  'keydown': function (e) {
    if (e.which === 13) {
      $(this).trigger('click');
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div role="link" tabindex="0">Fake Link</div>

最后，我们的<div>是一个线性---哦现在其他开发人员在抱怨。现在怎么办？

好的，所以开发人员不喜欢这段代码。他们试图在事件上使用preventDefault，但它仍然可以工作。这很容易解决：

我警告过你这很糟糕 

$(document).on({
  'click': function (e) {
    if (!e.isDefaultPrevented()) {
      window.location = 'http://example.com';
    }
  },
  'keydown': function (e) {
    if (e.which === 13 && !e.isDefaultPrevented()) {
      $(this).trigger('click');
    }
  }
}, '[role="link"]');

$('[aria-disabled="true"]').on('click', function (e) {
  e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div role="link" tabindex="0">Fake Link</div>
<div role="link" aria-disabled="true" tabindex="0">Fake disabled link</div>

我们就是这样——还有更多？我还不知道什么？现在告诉我所有的东西，这样我就可以修复它！

  • 好吧，没有办法指定目标。我们可以通过更新到window.open来解决。
  • 单击事件和键盘事件忽略了Ctrl、Alt和Shift键。很容易，只需要在事件对象上检查这些值。
  • 没有办法指定上下文数据。让我们只添加一些[data-*]属性，然后就可以完成了。
  • 单击事件没有遵守使用的鼠标按钮，中间的鼠标应该在新标签页中打开，右键不应该触发事件。很容易，只需向事件侦听器添加更多检查。
  • 样式看起来很奇怪。当然样式很奇怪，因为它是一个<DIV>而不是锚点！

好吧，我会解决前四个问题，不再解决更多问题。我已经受够了这个愚蠢的自定义元素垃圾。我一开始就应该使用<a>元素。

告诉过你。 

$(document).on({
  'click': function (e) {
    var target,
        href;
    if (!e.isDefaultPrevented() && (e.which === 1 || e.which === 2)) {
      target = $(this).data('target') || '_self';
      href = $(this).data('href');
      if (e.ctrlKey || e.shiftKey || e.which === 2) {
        target = '_blank'; //close enough
      }
      open(href, target);
    }
  },
  'keydown': function (e) {
    if (e.which === 13 && !e.isDefaultPrevented()) {
      $(this).trigger({
        type: 'click',
        ctrlKey: e.ctrlKey,
        altKey: e.altKey,
        shiftKey: e.shiftKey
      });
    }
  }
}, '[role="link"]');

$('[aria-disabled="true"]').on('click', function (e) {
  e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div role="link" tabindex="0" data-href="http://example.com/">Fake Link</div>
<div role="link" tabindex="0" data-href="http://example.com/" data-target="_blank">Fake Link With Target</div>
<div role="link" aria-disabled="true" tabindex="0" data-href="http://example.com/">Fake disabled link</div>

注意，由于它们被沙箱化，堆栈片段不会打开弹出窗口。
就是这样。这就是兔子洞的尽头。所有这些疯狂的事情都可以简单地做到：
<a href="http://example.com/">
    ...your markup here...
</a>

我在这里发布的代码可能存在问题。它可能有错误，即使我自己还没有意识到。尝试复制浏览器免费提供给您的内容是很困难的。有许多微妙之处很容易被忽视，因此99%的时间尝试模拟它是不值得的。
7

不要这样做。

  • 如果您想要一个链接，请使用正确的<A>NCHOR</a>标签包装内容。
  • 如果您想将<DIV>转换为链接，请使用"JavaScript"将<DIV>包装在<A>NCHOR</A>中。
  • 如果您想在单击<DIV>时执行某些操作，请使用onclick事件处理程序...并不要称其为“链接”。
6
<div style="cursor:pointer" onclick="document.location='http://www.google.com'">Content Goes Here</div>
2
<div style="cursor:pointer;" onclick="document.location='http://www.google.com'">Foo</div>
1
考虑添加解释以帮助保持 SO 成为一个学习资源，而不仅仅是答案。 - Jon Egeland
2
您可以使用JavaScript来实现此效果。如果您使用框架，这种事情就变得非常简单了。以下是jQuery的示例：
$('div#id').click(function (e) {
  // Do whatever you want
});

这个解决方案具有明显的优点，即不将逻辑放在您的标记中。
2
你可以通过添加 onclick="window.location='目标URL'" 并将其样式设置为 "cursor:pointer"，使整个 DIV 具有链接功能。但这通常不是一个好主意，因为搜索引擎无法跟随生成的链接，读者无法在标签页中打开或复制链接位置等。相反，你可以创建一个普通的锚点标签，然后将其样式设置为 display:block，然后像处理 DIV 一样处理它。
0
记住搜索蜘蛛不会索引JS代码。因此，如果您将URL放在JS代码中，请确保还将其包含在页面的其他传统HTML链接中。
也就是说，如果您希望链接的页面被Google等索引，请这样做。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接