jQuery hover事件正常但click事件失效，如何修复并简化代码？

1. 打开浏览器开发者工具控制台，先确认无JS报错、jQuery库正常加载，排除基础语法问题
2. 在click事件回调中加入console.log('点击触发')，点击导航后查看控制台是否有输出，确认事件本身是正常触发的
3. 切换到元素面板观察导航元素的类名变化，会发现点击后active类确实被加上，但鼠标移开元素时，hover的移出回调会把active类删除，这就是看起来点击不生效的核心原因：hover和点击选中状态复用了同一个active类，导致状态冲突。另外如果你的导航是多页面跳转场景，点击后页面刷新，JS重新执行会默认给第一个导航加active，也会出现点击不生效的错觉。

拆分两类状态的类名，hover临时态用单独类名，点击选中的固定态保留active类：

调整CSS代码 #

相同样式可以合并选择器精简代码：

.navi>li a.active,
.navi>li a.hover-active {
  color: #0a2a43;
  background-color: rgba(255, 255, 255, 0.8);
}

调整JS代码 #

如果是单页场景可以加e.preventDefault()阻止a标签默认跳转，多页场景需要在页面加载时匹配当前URL给对应导航加active类：

$(document).ready(function() {
  $(".navi li a:first").addClass("active");
  // hover事件用临时类
  $(".navi li a").hover(function() {
    $(this).addClass("hover-active");
  }, function() {
    $(this).removeClass("hover-active");
  });
  // click事件用固定选中类
  $(".navi li a").click(function(e) {
    // 单页场景阻止默认跳转，多页可删除该行
    e.preventDefault();
    $(".navi li a").removeClass("active");
    $(this).addClass("active");
  });
});

可以用jQuery的on方法批量绑定事件，同时缓存DOM选择结果减少重复查询，优化后代码如下：

$(document).ready(function() {
  // 缓存导航元素，避免重复查询DOM
  const $navLinks = $(".navi li a");
  // 初始化默认选中
  $navLinks.first().addClass("active");
  // 批量绑定多个事件
  $navLinks.on({
    mouseenter: () => $(this).addClass("hover-active"),
    mouseleave: () => $(this).removeClass("hover-active"),
    click: function(e) {
      e.preventDefault();
      $navLinks.removeClass("active");
      $(this).addClass("active");
    }
  });
});

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