如何用jQuery实现HTML头部CSS文件的双向切换（点击图片触发）

我来帮你搞定这个双向切换的问题～你之前的代码只能单向替换CSS文件，没法切回原来的Redesign.css，我们只需要在点击时判断当前生效的CSS文件，然后切换到另一个就可以了。

方案一：通过判断CSS文件路径切换 #

这种方法直接检查当前link标签的href属性，根据文件名切换到对应的主题文件，不需要修改原HTML结构：

$(document).on('click','#home_owl',function (){
  // 匹配包含Redesign.css或greyscale.css的link标签
  const cssLink = $('link[href*="Redesign.css"], link[href*="greyscale.css"]');
  const currentHref = cssLink.attr('href');
  
  // 根据当前文件切换到另一个主题
  if (currentHref.includes('Redesign.css')) {
    cssLink.attr('href', 'static/css/greyscale.css');
  } else {
    cssLink.attr('href', 'static/css/Redesign.css');
  }
});

注意点：

• 这里用href*=来模糊匹配路径，避免因为完整路径写法差异（比如相对路径/绝对路径）导致找不到元素；
• 确保greyscale.css的路径和Redesign.css完全一致（都是static/css/目录下），如果路径不同要对应修改。

方案二：用数据属性记录主题状态（更清晰） #

如果想让逻辑更直观，可以给原link标签添加一个data-theme属性来标记当前主题，这样切换时不用解析路径：

1. 先修改HTML中的link标签：

<link rel="stylesheet" type="text/css" href="static/css/Redesign.css" data-theme="color">

2. 然后编写jQuery代码：

$(document).on('click','#home_owl',function (){
  const cssLink = $('link[data-theme]');
  const currentTheme = cssLink.data('theme');
  
  if (currentTheme === 'color') {
    // 切换到灰度主题，同时更新data-theme标记
    cssLink.attr('href', 'static/css/greyscale.css').data('theme', 'grey');
  } else {
    // 切回彩色主题
    cssLink.attr('href', 'static/css/Redesign.css').data('theme', 'color');
  }
});

这种方法的优势是逻辑更清晰，后续如果新增主题也更容易扩展。

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