使用JQuery让任意元素可点击跳转

在做页面的时候,可能会遇到要让某些非a标签的元素可以被点击并实现类似a标签的链接跳转功能,例如要让一个table的行可以点击并跳转,我们可以利用JS进行实现。

给需要点击跳转的元素加上标识

例如给tabletr加上一个clickable类,然后加上一个data-href属性,属性值为需要跳转的目的地址:

<tbody>
  <tr class="clickable" data-href="http://ruterly.com">
    <td></td>
    <td></td>
    <td></td>
  </tr>
</tbody>

通过JS进行跳转

使用JQuery给带有类clickable的元素加上点击事件,跳转目的地址是data-href属性的值:

$(document).ready(function() {
  $(".clickable").click(function() {
    window.document.location = $(this).data("href");
  });
});

添加点击指针样式

为了让用户可以清楚地知道这个元素是可点击的,我们将鼠标的悬停样式修改为pointer

.clickable {
  cursor: pointer;
}

完成!之后要让任意元素可以点击跳转,只需要加上类clickable以及data-href属性就OK了。

Search

    Table of Contents