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

Question

I want to make HTML elements clickable using Javascript. Here's what I have:

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

This works, but I'm wondering if there's a better way to do this. Thanks!

Answer 1

While your example works, it is neither semantic nor clean. You can't right click the div to copy the link location or open in new tab, or middle click it etc. There's nothing stopping you from setting an anchor to display: block to act like a div and then putting all sorts of elements inside the a tag itself. That's the semantic way to do it - let the browser handle the native function of a link.

Answer 2

Starting with HTML5 , you may simply wrap your flow content within your anchor tag.

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

This allows for the functionality you want without using clunky JavaScript code, and doesn't break browser gestures (middle click for new tab).

A few rules however apply in order to stick to the HTML5 standard:

• The parent tag of your <a> must allow for flow content . The anchor tag in HTML5 has a transparent content model, meaning that it adopts the model of its parent.

• You may not place any interactive content (eg buttons or other links) within your anchor tag.

Note that this works in all browsers, including Internet Explorer 6. However, make sure you set the display style of your <a> tag to either block or inline-block depending on the desired result.

Answer 3

如果可以更改html的最佳方法是将div更改为a，则可以将其设置为“ display：block”，因此它是一个类似于div的块元素。

Answer 4

You can also wrap the div in anchor tag ie <a href="#">Div goes here</a> . In this way u get wat u want. No more styling and javascript needed :)

Answer 5

If HTML5 is ok you can do something like this:

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