如何使包含链接的HTML类成为链接

How to make an HTML class containing links a link?

本文关键字：链接 HTML 何使包      更新时间：2023-09-26

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>
嵌套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');
});

在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

澄清我现在面临的问题是，我使用的是嵌入式平台，这是图像的来源。所以，我只是发布了链接，并通过嵌入的方式从链接中解析图像。但是，ahref将用户带到原始网站。标题将用户带到我网站上包含该内容的页面。我需要为整个部门做一个标题。

所以，我用CSS找到了答案，我刚刚在div.

中的一个类"故事"上添加了：style="pointer-events:none；cursor:default；"在带有image和style="cursor:pointer；"onclick="window.location='link'"的链接上
相关文章：