Question

我想使用Javascript使HTML元素可点击。这就是我所拥有的：

<div class="link">
<a href="http://example.com">
</div>

<script>
$('.link').click(function(){
  if(link=$(this).find('a').attr('href'))
    window.location.href=link;
});
</script>

这有效，但我想知道是否有更好的方法来做到这一点。谢谢！

Answer 1

虽然您的示例有效，但它既不是语义也不是干净。您无法右键单击div来复制链接位置或在新选项卡中打开，或者在中间单击它等等。没有什么能阻止您将锚点设置为display: block以充当div然后放入各种类型的a标记内的元素。这是执行它的语义方式 - 让浏览器处理链接的本机功能。

Answer 2

Starting with HTML5，您可以简单地将流内容包装在锚标记中。

<a href="http://example.com/">
  <div class="special">
    <img src="http://example.com/news.jpg" alt="Great Picture" />
    <p>Great News! This whole section is clickable!</p>
  </div>
</a>

这允许您在不使用笨重的JavaScript代码的情况下获得所需的功能，并且不会破坏浏览器手势（中间点击新选项卡）。

然而，一些规则适用于坚持HTML5标准：

<a>的父标记必须允许流内容。 HTML5中的锚标记具有透明内容模型，这意味着它采用其父模型。
您不得在锚标记中放置任何互动内容（例如按钮或其他链接）。

请注意，这适用于所有浏览器，包括Internet Explorer 6.但是，请确保将display标记的<a>样式设置为block或inline-block取决于所需的结果。

Answer 3

如果您可以更改html，最好的办法就是将div更改为a，然后您可以创建一个“display：block”，这样它就像div这样的块元素。

Answer 4

您还可以将div包裹在anchor标记中，即<a href="#">Div goes here</a>。通过这种方式你得到你想要的。不再需要样式和javascript：）

Answer 5

如果HTML5没问题，你可以这样做：

<script type="text/javascript">
$(document).ready(function() {
    $('.link').click(function(e){
        window.location.href = $(this).data('link');
    });
});
</script>
<div class="link" data-link="http://example.com">My Link</div>

什么是替换`<a>` using Javascript/JQuery?</a>的正确方法

5 个答案: