锚标签不能正常工作快递

Question

当我点击 p 时，没有任何反应，但是当我点击 div 的任何其他部分时它起作用 fine.I 不知道为什么这是 happening.Please 帮助我.

<%- include('./partials/header');-%>
<%- include('./partials/flash');-%>
<% posts.forEach(function(post){ %>
<a href="/post/<%= post._id %>" id="posta">
<div id="post">
<h3 class="text-dark" id="title"><%- post.Title %></h3>
<p class="text-secondary" id="date"><small><%=post.Author.name %><br>
<%=post._id.getTimestamp().toLocaleDateString()%></small></p>
<p class="h6 text-dark" id="Postcontent"><%- post.Content.substring(0,200)+"..." %><span class="h6 text-success">Read more</span>
</p>
</div>
</a>
<span id="border"></span>
<% }) %>
<%- include('./partials/footer');-%>

我用的css：

#post:hover{
    box-shadow:  0 5px 5px 0 #4CAF50;
    text-decoration: none;
}
#posta:hover {
  text-decoration: none;
}
#posta:link {
    text-decoration: none;
  }
  
#posta:visited {
    text-decoration: none;
  }
#Postcontent{
  font-size: 1rem; 
  white-space: pre-wrap;
}

更新：这很奇怪，但我观察到的是，当我点击第一个项目的 p 时它不起作用，但对于所有其他项目它都有效。

Link 到网站： https://enlightening-blog.herokuapp.com/

Answer 1

基于您的代码。问题在于您编写 js 代码的方式。问题出在问题中提到的其他地方（感谢链接）。您犯的错误是菜鸟错误之一（永远不要将 static id 放在循环中）。 id是一样的。根据 js 的工作方式，它会查找唯一的 id，但重复的 classes 可能没问题。所以你现在的代码是

document.getElementById("Postcontent").addEventListener("click", function(event){
  event.preventDefault();
  });

将 Postcontent 从 id 更改为 class 并添加以下代码

var postcontent = document.querySelectorAll(".Postcontent");
postcontent.addEventListener('click', function(event){
   event.preventDefault();
});

Answer 2

@rajesh-paudel 提到了一个小错误，但很重要。

 Never user static ids in loops.

此代码违反标准，因此不正确。它会失败验证检查，它应该。

ID 必须是唯一的。在这里阅读：HTML 4.x Specification HTML 5

When specified on HTML elements, the id attribute value must be 
unique amongst all the IDs in the element's tree and must contain at 
least one character. The value must not contain any ASCII whitespace.

锚标签不能正常工作快递

Anchor tag does not work properly express

html

javascript

css

jquery

ejs