如何实现点击div跳转URL并在新标签页打开

这个需求完全可以实现。你添加target="_blank"不生效的原因是：target是<a>标签的专属属性，对普通div元素、location.href跳转逻辑均不生效，location.href本身的作用就是修改当前页面的跳转地址，自然无法实现新页面打开的效果。

具体实现方法 #

方法1：直接替换原有点击逻辑（最小改动） #

把你原来onClick绑定的location.href逻辑替换为window.open()API即可，示例代码如下：

<div onClick="window.open('你要跳转的目标URL', '_blank');">
  你原来div内的所有内容
</div>

• window.open的第二个参数就是指定打开方式，填_blank即可实现新页面打开
• 该场景是用户主动点击触发的跳转，不会被浏览器的弹窗拦截规则拦截，可以正常使用

方法2：语义化优化方案（更推荐） #

如果没有必须用div的特殊场景，更建议直接把<a>标签设置为块级元素，既符合前端语义规范，对SEO、无障碍适配都更友好，也不需要额外写JS逻辑：

<a href="你要跳转的目标URL" target="_blank" style="display: block;">
  你原来div内的所有内容
</a>

• 给<a>标签设置display: block后，它的渲染行为和div完全一致，支持设置宽高、内外边距等所有CSS样式，不需要额外调整原有布局
• 原生支持新页面打开、回车触发跳转等默认行为，不需要额外写兼容逻辑

无障碍适配补充 #

如果你必须使用div实现点击跳转，建议补充无障碍适配属性，方便键盘操作、屏幕阅读器识别：

<div 
  role="button"
  tabindex="0"
  onClick="window.open('你要跳转的目标URL', '_blank');"
  onkeydown="if(event.key === 'Enter' || event.key === ' ') { window.open('你要跳转的目标URL', '_blank'); }"
>
  你原来div内的所有内容
</div>

内容的提问来源于stack exchange，提问作者Heelyx23