如何在链接中创建div标签

Question

如何在链接中创建div标签.我希望我的整个div可以点击.

Answer 1

JS:

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

jQuery的:

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

确保使用cursor:pointer这些DIV

Answer 2

如果你必须在div中设置你的锚标签,你也可以使用CSS来设置锚点以通过display:block填充div.

因此:

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

现在,当用户将光标悬浮在该div中时,锚标记将填充div.

Answer 3

如果你正在使用HTML5,正如另一个问题所指出的,你可以把你的div内部a:

<a href="http://www.google.com"><div>Some content here</div></a>

预先使用此方法,因为它在您的结构中明确了所有内容都是可点击的,以及它指向的位置.

Answer 4

所以你想要一个元素不是它的东西？

一般来说,这不是一个好主意.如果您需要链接,请使用链接.大多数情况下,只使用它所属的适当标记会更容易.

总而言之,有时你只需打破规则.现在,问题没有javascript,所以我将把免责声明放在这里:

如果<div>没有使用链接(或等效链接,例如<form>只包含提交按钮的链接)或使用JavaScript,则不能将链接作为链接.

从现在开始,这个答案将假设允许使用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>,并在按下时触发click事件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-*]属性,并用它来称呼它.
• click事件不遵循正在使用的鼠标按钮,鼠标中键应该在新选项卡中打开,右键不应该触发事件.很容易,只需要为事件监听器添加一些检查.
• 风格看起来很奇怪.课程很好,风格很吵,<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%的情况下试图模仿它是不值得的.

Answer 5

不要做.

• 如果您想要一个链接,请将内容包装在正确的内容中<A>NCHOR</a>.
• 如果你想把它<DIV>变成一个链接,使用"Javascript"来包装<DIV>内部<A>NCHOR</A>
• 如果要在单击时<DIV>使用onclick事件处理程序执行某些操作,请不要将其称为"链接".

Answer 6

<div style="cursor:pointer" onclick="document.location='http://www.google.com'">Content Goes Here</div>

Answer 7

<div style="cursor:pointer;" onclick="document.location='http://www.google.com'">Foo</div>