HTML中给div加超链接

409 阅读1分钟

前言

最近开发一个静态公司官网,其中有四个推荐位,推荐位由图片,标题,简介组成,要求点击推荐位的任意位置皆可跳转到指定页面。

解决方式

方式一

使用 window.location.href 跳转,如下代码所示:

<div class="recommend" onclick="window.location.href='https://first.com';return false">
    <img class="recommend_img" src="/images/recommend/first.png"/>
    <span class="recommend_title">First</span>
    <p class="recommend_desc">
        第一个推荐位
    </p>
</div>

return false:取消默认的事件行为,例如你给a标签增加了href,就会既执行函数也会跳转,例如:hello

方式二

使用 window.open 跳转,语法:window.open(*URL,name,specs,replace*) 参考文档,如下代码所示:

<div class="recommend" onclick="window.open('https://first.com','_self')">
    <img class="recommend_img" src="/images/recommend/first.png"/>
    <span class="recommend_title">First</span>
    <p class="recommend_desc">
        第一个推荐位
    </p>
</div>

_self:代表在当前窗口打开,默认是 _blank,在新页面打开。