Javascript 使背景图像在CSS网格中可单击

我有一个带有背景图像的div标签。如何使div标签在越来越大和越来越小的屏幕上成为超链接？是这样的吗？：onclick='window.location.href=https://www.google.com"

HTML:

---

使用jquery很容易

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<script>
    $('.sbp-item6').click( function(e){
    window.location.replace("http://www.google.com");
    });
</script>

---

您只需注册单击处理程序：

$('.sbp-item6').on('click', (event) => {
    // your stuff here
  window.location.href="https://www.google.com"
})

---

为什么不用锚定标签把div包起来呢？如果要保持相同的网格布局，您必须将.sbp-item10类添加到标记中。然后，如果要删除特定屏幕大小的链接，可以在任何断点处添加以下CSS属性：

@media (max-width: 475px) {
  .sbp-item10 {
    pointer-events: 'none';
  }
}

如果使用jQuery：

$( ".sbp-item6" ).click(function() {
     window.location.href = "https://www.google.com";
});

我认为，如果您有需要指向不同url的不同div，更好的解决方案是将div的属性设置为url。用js检索它。并使用它指向url本身

<div class="sbp-item6" link-to="http://www.google.com"></div>
$( ".sbp-item6" ).click(function() {
    var url = $(this).attr("link-to");
    window.location.href = url;
});

---

如果在div上单击而不是在div中单击背景图像，这不是更有意义吗。。或者背景图像触发click有什么特殊原因？clickable是什么意思？当你点击它时，你想发生什么？Hello@Lefty。是的，那绝对更有意义。我将重新提出我的问题。谢谢你。@Ari。谢谢你的评论。我刚刚重新提出了我的问题。我需要背景图像是一个超链接。为什么不使用a标签呢？谢谢你的建议。我可以看出这是我想要的工作方式。有一件事我其实没把它删掉。。当一个人悬停在sbp-item6上时，我如何将光标变成手呢？在css中不应该在内联元素中使用块元素。非常感谢您的建议。这正是我所需要的。但我可以看出有一个奇怪的问题。假设您点击sbp-item6，您将获得http://www.google.com. 如果从此处单击浏览器中的“上一步”，将无法进入上一页。这怎么可能？因为它不是一个正常的链接？你也有这个问题，使用谷歌作为链接或使用其他东西？

$( ".sbp-item6" ).click(function() {
     window.location.href = "https://www.google.com";
});

<div class="sbp-item6" link-to="http://www.google.com"></div>
$( ".sbp-item6" ).click(function() {
    var url = $(this).attr("link-to");
    window.location.href = url;
});

.sbp-item6
{
    cursor: pointer;
}