Question

班级story中的图片和标题有两个不同的链接。图像指向一个位置并链接到另一个位置。

我需要将整个班级story变成一个链接。

<div class="story">
<a href="link"> <img src="linkforimage"></a> 
<a href="link2">Caption for image </a>
</div>

我需要这样的解决方案：

<a href="link">
  <div class="story">
    <a href="link"> <img src="linkforimage"></a> 
    <a href="link2">Caption for image </a>
  </div>
</a>

Answer 1

嵌套a标签是一个坏主意。我会在这里使用代表。有一个包装器a标签，并在JS中检查点击了哪个来源span。

HTML 的

<a href="#" class="story">
    <span data-href="link"><img src="linkforimage"/></span> 
    <span data-href="link2">Caption for image</span>
</a>

js （基于jquery）

$('.story').on('click', 'span', function() {
  document.location.href= $(this).data('href');
});

Answer 2

anchor标记内不能包含anchor标记。您可以使用onclick方法来实现目标。

<div onClick="window.open(link);" class="story">
<a> <img src="linkforimage"></a> 
<a onClick="window.open(link2); event.stopPropagation();" >Caption for image </a>
</div>

编辑jsfiddle

Answer 3

澄清我现在面临的问题是我正在使用嵌入式平台，其中图像来自。所以，我只是发布链接和图像通过嵌入解析链接。但是，那个ahref将用户带到原始网站。标题将用户带到我网站上包含该内容的页面。我需要为整个div制作标题。

所以，我找到了CSS的答案，我刚补充说：style =＆＃34; pointer-events：none; cursor：default;＆＃34;在图像和样式的链接上=＆＃34;光标：指针;＆＃34;的onclick =＆＃34; window.location的=＆＃39;连结＆＃39;＆＃34;在课堂上＃34;故事＆＃34;在div。

如何使包含链接的HTML类链接？

3 个答案: