AJAX请求成功后如何为导航菜单添加.active类？

嘿，我看你正在做一个带AJAX的导航菜单，要实现点击菜单添加.active类同时加载对应内容对吧？我来帮你完善代码，一步步来：

首先明确核心需求：

• 点击导航链接时，给当前点击的<a>添加.active类，移除其他链接的该类
• 通过AJAX加载对应页面内容到#content容器
• 阻止链接默认的跳转行为，避免页面刷新

你的HTML部分可以保持原样： #

<ul id="nav">
  <li><a href="default">Home</a></li>
  <li><a href="about">About</a></li>
  <li><a href="contact">Contact</a></li>
</ul>
<div id="content">
  Content will be here ...
</div>

完善后的JavaScript代码（带注释说明）： #

$(function() {
  // 给所有导航链接绑定点击事件
  $('ul#nav li a').click(function(e) {
    // 阻止链接默认跳转行为，这是实现AJAX无刷新的关键
    e.preventDefault();
    
    // 先移除所有导航链接的.active类，避免多个链接同时高亮
    $('ul#nav li a').removeClass('active');
    // 给当前点击的链接添加.active类
    $(this).addClass('active');
    
    // 获取要加载的页面标识（就是href属性的值）
    var page = $(this).attr('href');
    
    // 发起AJAX请求，把对应页面内容加载到#content容器
    $('#content').load(page + '.html', function(response, status, xhr) {
      // 可选：处理内容加载失败的情况
      if (status === "error") {
        $('#content').html('哎呀，加载内容失败了: ' + xhr.status + ' ' + xhr.statusText);
      }
    });
  });

  // 可选：页面初始化时，默认给Home链接添加.active类
  $('ul#nav li a[href="default"]').addClass('active');
  // 同时默认加载Home页面的内容
  $('#content').load('default.html');
});

额外补充注意点： #

• 确保你的页面文件（default.html、about.html、contact.html）存在且路径正确，如果是动态后端页面（比如PHP），可以把.html改成对应后缀
• 记得先引入jQuery库，不然这段代码没法运行
• 给.active类写对应的CSS样式，让选中状态更直观，比如：

ul#nav li a.active {
  color: #2563eb;
  font-weight: bold;
  border-bottom: 2px solid #2563eb;
}

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