Question

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

HTML：

<div class="sbp-item6"></div>

CSS：

.sbp-item10 {
    grid-row: 6 / 7;
    grid-column: 1/5;
    height: 250px;
    background-image: url("https://placehold.it/380x250");
}

Answer 1

如果您使用jQuery：

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

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

<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;
});

最后，在CSS中：

.sbp-item6
{
    cursor: pointer;
}

Answer 2

易于使用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>

Answer 3

您应该只注册点击处理程序：

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

Answer 4

为什么不只用锚点<a>包裹div？如果决定这样做，则必须将.sbp-item10类添加到<a>标签中，以保持相同的网格布局。然后，如果要以某些屏幕尺寸删除链接，则可以在任意断点处添加以下CSS属性：

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

在CSS网格中使backgroundimage可单击

4 个答案: