如何使用jQuery将元素当前类添加到父级div#sidebar

嘿，这事儿不难，咱们可以用jQuery监听这些链接的点击事件，把对应类添加到#sidebar上——不过要记得先清除之前的类，避免多个主题类叠加哦。

步骤1：编写jQuery逻辑 #

首先要等页面DOM加载完成后再执行代码，然后给目标链接绑定点击事件：

$(document).ready(function() {
  // 监听所有目标链接的点击事件
  $('.methodeLink, .educationLink, .pensionLink, .toilettageLink').click(function(e) {
    // 暂时阻止锚点默认跳转（如果需要保留跳转，可注释此行，或处理完类后手动跳转）
    e.preventDefault();
    
    // 从链接的类中筛选出我们需要的主题类（排除backgroundLi）
    const targetClass = $(this).attr('class').split(' ').filter(cls => 
      ['methodeLink', 'educationLink', 'pensionLink', 'toilettageLink'].includes(cls)
    )[0];
    
    // 先移除#sidebar上所有已存在的主题类，避免样式冲突
    $('#sidebar').removeClass('methodeLink educationLink pensionLink toilettageLink');
    
    // 将当前链接的主题类添加到#sidebar
    $('#sidebar').addClass(targetClass);
    
    // 如果需要保留锚点跳转，添加此行代码
    window.location.href = $(this).attr('href');
  });
});

步骤2：补充CSS样式 #

接下来要给#sidebar的不同主题类设置对应的背景色，比如：

/* 原有基础样式 */
#sidebar { background-color: red; transition: background-color 0.3s ease; }

/* 各主题对应的背景色，替换成你需要的颜色值 */
#sidebar.methodeLink { background-color: #87CEEB; }
#sidebar.educationLink { background-color: #90EE90; }
#sidebar.pensionLink { background-color: #F0E68C; }
#sidebar.toilettageLink { background-color: #FFB6C1; }

代码逻辑解释 #

• $(document).ready()：确保DOM加载完成后再执行JS，避免找不到目标元素。
• 筛选targetClass：因为链接同时带有backgroundLi类，所以我们要精准提取出xxLink类。
• removeClass()：先清除之前的主题类，防止#sidebar同时存在多个类导致样式混乱。
• addClass()：把当前链接的主题类添加到#sidebar，触发对应的背景色样式。

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