错误link，错误的地方

Question

好的，所以我正在尝试显示来自 api 的新闻文章。除了每篇特定文章的 link 之外，我在 javascript 中所写的内容就是这样做的（文章照片、标题、作者等）。起初它们根本不可点击，然后我用我在这里找到的东西改变了 css。这使得整个页面都可以点击，并且仅适用于一个 link，并且仅适用于一个 link。所以我需要知道的是如何确保点击发生在正确的位置并到达正确的位置？请谢谢。

function GenerateArticle(data) {
  const Article = document.getElementById("ArticleGrid")
  for (let i = 0; i < data.length; i++) {
    const Div = document.createElement("Article");
    Div.innerHTML =
      `<img src = ${data[i].urlToImage}>
            <h5>${data[i].title}</h5>
            <p>${data[i].publishedAt}</p>
            <p>${data[i].description}</p>
            <p>${data[i].content}</p>
            <p>${data[i].source.name}</p>
            <p>${data[i].author}</p>
            <a href = '${data[i].url}'></a>`;
    Article.appendChild(Div);
  }
}

a {
  position: fixed;
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  text-decoration: none;
}

Answer 1

您想要实现的是一个拉伸的 link，一个没有实际内容但跨越其父节点的全部内容的锚点。只是，你不在那里。有几种方法可以做到这一点，但让我们简化一下以进行演示。

将 Div 上的位置样式属性设置为相对。

const Div = document.createElement("article");
Div.style.position = "relative";

绝对位置你的 link 代替固定的。

a {
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  text-decoration: none;
}

错误link，错误的地方

wrong link, wrong place

javascript

hyperlink

template-literals