Question

下午好，

我正在重建一些网页（仅使用html / css / jquery / js），其中一个网页上有一系列产品。每个都包含在他们自己的div中，并在页面上重复多次。产品都有图像，一些文字和链接。

我正在尝试更改产品幻灯片，以便整个元素可以点击。通常没什么大不了的，因为我可以将吸盘包裹在标签中并完成它。

但是，产品幻灯片上有一个链接。并且正在使用的CSS主题根据类名和元素类型进行选择，因此如果我改变其中任何一个样式将会脱落。

我在codepen中构建了一个粗略的结构示例： http://codepen.io/joshmonks/pen/EyByEr

<a class="product-link">
    <div id="product">
        <div><img></img></div>
        <div id="description">text text text</div>
        <a class="inner-link">buy now!</a>
    </div>
</a>

我想知道处理这种情况的最佳方法，我已经看到了一些关于使用JQuery来监听要点击的#product div的解决方案，并在内部链接上触发点击事件。如果没有找到其他人，我相信我会使用这个解决方案。如果可能的话，我希望在可能的情况下解决事件的结构性解决方案，因为它感觉结构更像是在示例中，但是有效的html

如果我可以嵌套标签，我可以简单地不在内部链接上放置href，并应用所有样式。然后在外链接上有href，但没有应用样式。当然，这是无效的html :(

感谢您的帮助和建议！

Answer 1

您不能在链接中包含链接，但是您可以使用javascript创建可点击的div来包装链接，请参阅小提琴示例https://jsfiddle.net/neya0v76/3/

<div id="container">
  <div class="product-link" onclick="goToLink()">
    <div id="product">
      <div>
        <img src="http://www.esri.com/news/arcuser/0610/graphics/nospin_1-lg.jpg" />
      </div>
      <div id="description">
        Text Text Text
      </div>
      <a class="inner-link" href="#">buy now!</a>

    </div>
  </div>
</div>
<script>
  function goToLink() {
    window.location.href = 'www.google.com';
  }
</script>

Answer 2

如果您不介意不在元素中选择内容，则可以制作一个位于内容顶部的叠加层，该内容本身就是一个锚点。将父级定位为position: relative;，将子级<a>覆盖为position: absolute; top:0; bottom: 0; left: 0; right: 0;。

只需确保叠加层是您的.inner-link锚点的兄弟，而不是父级，它就在它之前。

在div中嵌套链接，其中div被链接

2 个答案: