Question

好，所以我试图显示来自api的新闻报道。我用javascript编写的内容（文章照片，标题，作者等）仅能做到这一点，但每个特定文章的链接除外。起初它们根本不可点击，然后我用在这里找到的东西更改了CSS。使整个页面可点击，并且仅适用于一个链接和一个链接。因此，我需要知道的是如何确保点击发生在正确的位置并到达正确的位置？请，谢谢。

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

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

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

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

将链接绝对固定在固定位置。

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

错误的链接，错误的地方

1 个答案: