基于jQuery实现选中导航项时移除指定div的技术咨询

没问题，我来帮你搞定这个需求！结合你给出的导航结构，这里分两种常见场景给出具体实现，你可以根据实际的“移除”需求（是隐藏DOM还是彻底删除）来选择：

核心逻辑梳理 #

我们要实现的是：点击导航里的<li>项时，先更新选中状态（给当前项加selected类，移除其他项的该类），然后根据当前项的data-target属性，对指定的Div执行移除操作。

场景1：隐藏目标Div （常用，可恢复） #

如果只是想把指定Div隐藏起来，之后还能恢复显示，用.hide()方法就可以：

$(document).ready(function() {
  // 给所有导航项绑定点击事件
  $('#record_nav .course-record').on('click', function() {
    // 第一步：更新导航选中状态
    $('#record_nav .course-record').removeClass('selected');
    $(this).addClass('selected');
    
    // 第二步：获取当前项对应的目标Div选择器
    const targetDiv = $(this).data('target');
    
    // 第三步：隐藏指定的Div
    $(targetDiv).hide();
    
    // 如果你实际需求是「显示当前选中项的Div，隐藏其他所有目标Div」，可以替换成下面这段：
    // // 先获取所有导航项对应的目标Div选择器
    // const allTargets = $('#record_nav .course-record').map(function() {
    //   return $(this).data('target');
    // }).get();
    // // 隐藏所有目标Div，再显示当前选中的
    // $(allTargets.join(',')).hide();
    // $(targetDiv).show();
  });
});

场景2：彻底删除目标Div （不可恢复） #

如果需要把指定Div从DOM结构里彻底删掉，之后无法恢复，就用.remove()方法：

$(document).ready(function() {
  $('#record_nav .course-record').on('click', function() {
    // 更新导航选中状态
    $('#record_nav .course-record').removeClass('selected');
    $(this).addClass('selected');
    
    // 获取目标Div选择器
    const targetDiv = $(this).data('target');
    
    // 彻底删除指定Div
    $(targetDiv).remove();
  });
});

额外优化：处理初始选中状态 #

因为你的导航里默认有一个带selected类的项，我们可以在页面加载完成时，自动执行一次对应的移除操作，保证初始状态符合预期：

$(document).ready(function() {
  // 初始化：处理默认选中的导航项
  const initialSelected = $('#record_nav .course-record.selected');
  if (initialSelected.length) {
    // 这里根据需求选hide()或remove()
    $(initialSelected.data('target')).hide();
  }
  
  // 绑定点击事件（和上面场景1/2的代码一致）
  $('#record_nav .course-record').on('click', function() {
    $('#record_nav .course-record').removeClass('selected');
    $(this).addClass('selected');
    
    const targetDiv = $(this).data('target');
    $(targetDiv).hide(); // 替换成remove()如果需要删除
  });
});

注意事项 #

• 确保页面中存在对应data-target值的Div（比如#upcoming对应<div id="upcoming">...</div>）
• 如果你的“移除”是其他逻辑（比如移除某个类而不是隐藏/删除），可以把.hide()/.remove()替换成对应的操作，比如$(targetDiv).removeClass('your-class')

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