JQuery点击触发页面刷新、hover无法修改CSS问题求助

嘿，我来帮你捋清楚这些问题，你的代码里有几个关键细节没处理对，咱们逐个解决：

问题1：选择器无效 + 点击触发页面刷新 #

首先，你写的$('abc p')是错误的——因为abc是元素的id，jQuery里id选择器必须以#开头，正确写法是$('#abc p')。

然后关于点击后页面刷新的问题，先看你的HTML代码：最后一个<p>标签没正确闭合（写成了<p>而不是</p>），这会导致DOM结构混乱，引发意外的页面行为，先把这个标签修正。

另外，虽然<p>标签默认点击不会刷新，但为了彻底避免意外，你可以在点击事件里添加event.preventDefault()，明确阻止默认行为。

问题2：鼠标悬停下划线效果 #

你用$('#abc p').hover().css('text-decoration','underline')的写法不对，hover()方法需要传入两个回调函数：一个处理鼠标进入时的样式，一个处理鼠标离开时的样式。正确的jQuery写法是：

$('#abc p').hover(
  function() { // 鼠标移入
    $(this).css('text-decoration', 'underline');
  },
  function() { // 鼠标移出
    $(this).css('text-decoration', 'none');
  }
);

不过更推荐用CSS实现悬停效果，比jQuery更高效简洁，直接在<head>里加样式：

#abc p:hover {
  text-decoration: underline;
}

问题3：选择器写法错误 #

你理解的逻辑是对的——要选择id="abc"下的所有<p>元素，但jQuery的id选择器规则是必须以#开头，所以正确的选择器是$('#abc p')，而$('abc p')会被解析成“选择所有<abc>标签下的<p>元素”，这显然不是你要的效果。

修正后的完整代码 #

把所有问题修复后的代码给你参考：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
/* CSS实现悬停下划线，更高效 */
#abc p:hover {
  text-decoration: underline;
}
</style>
</head>
<body>
<div id="abc">
  TEST PAGE
  <p style="text-decoration:none; cursor:pointer;" id="91">Page 1</p>
  <p style="text-decoration:none; cursor:pointer;" id="75">Page 2</p>
  <p style="text-decoration:none; cursor:pointer;" id="88">Page 3</p> <!-- 修正闭合标签 -->
</div>
<p id="replace">Replace this Text</p>
<script>
$(document).ready(function() {
  // 正确的id选择器绑定点击事件
  $('#abc p').on('click', function(event) {
    // 阻止默认行为，避免意外刷新
    event.preventDefault();
    var id = $(this).attr('id');
    
    $.ajax({
      type: "POST",
      url: 'testAjax2.php',
      data: { "articleID": id },
      success: function(data) {
        $("#replace").html(data);
      }
    });
  });

  /* 如果坚持用jQuery实现hover，就保留这段，否则用CSS即可
  $('#abc p').hover(
    function() {
      $(this).css('text-decoration', 'underline');
    },
    function() {
      $(this).css('text-decoration', 'none');
    }
  );
  */
});
</script>
</body>
</html>

内容的提问来源于stack exchange，提问作者HDer