如何将页面内的语言切换菜单样式变更同步到站点其他页面

现有脚本问题说明 #

• 功能不完整：仅实现了点击切换时的样式修改和Cookie写入，缺少页面初始化时读取Cookie并还原对应样式的逻辑，因此跳转页面后无法保持选中状态
• Cookie配置错误：没有设置path=/参数，默认Cookie仅在当前路径下有效，其他页面无法读取到存储的lang值
• 类名不统一：土耳其语对应的类名为selected-lang，其他语言都是selected-lang+语言代码的格式，后续维护容易出问题

完整实现方案 #

补充Cookie读取函数和页面加载时的状态还原逻辑，修正后的完整代码如下：

$(document).ready(function(){
  // 写Cookie，补充path=/确保全站所有页面都能读取
  function setCookie(lang){
    document.cookie = `lang=${lang}; expires=Mon, 1 Jan 2100 00:00:00 GMT; path=/`;
  };
  // 新增读Cookie函数
  function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
  }
  // 新增页面加载时读取Cookie还原状态的逻辑
  const savedLang = getCookie('lang');
  if (savedLang) {
    const langConfig = {
      tr: { text: 'Türkçe', className: 'selected-langtr' },
      en: { text: 'English', className: 'selected-langen' },
      de: { text: 'Deutsch', className: 'selected-langde' },
      ja: { text: '日本', className: 'selected-langja' },
      fr: { text: 'Français', className: 'selected-langfr' },
      es: { text: 'Español', className: 'selected-langes' },
      ru: { text: 'Pусский', className: 'selected-langru' }
    }
    if (langConfig[savedLang]) {
      const config = langConfig[savedLang];
      $("#lang-here").removeClass().addClass(config.className).text(config.text);
    }
  }

  // 点击事件逻辑，仅调整了土耳其语的类名保持统一
  $("#tr").click(function(){
    $("#lang-here").removeClass();
    $("#lang-here").addClass('selected-langtr');
    $("#lang-here").text("Türkçe");
    setCookie("tr");
  });
  $("#en").click(function(){
    $("#lang-here").removeClass();
    $("#lang-here").addClass('selected-langen');
    $("#lang-here").text("English");
    setCookie("en");
  });
  $("#de").click(function(){
    $("#lang-here").removeClass();
    $("#lang-here").addClass('selected-langde');
    $("#lang-here").text("Deutsch");
    setCookie("de");
  });
  $("#ja").click(function(){
    $("#lang-here").removeClass();
    $("#lang-here").addClass('selected-langja');
    $("#lang-here").text("日本");
    setCookie("ja");
  });
  $("#fr").click(function(){
    $("#lang-here").removeClass();
    $("#lang-here").addClass('selected-langfr');
    $("#lang-here").text("Français");
    setCookie("fr");
  });
  $("#es").click(function(){
    $("#lang-here").removeClass();
    $("#lang-here").addClass('selected-langes');
    $("#lang-here").text("Español");
    setCookie("es");
  });
  $("#ru").click(function(){
    $("#lang-here").removeClass();
    $("#lang-here").addClass('selected-langru');
    $("#lang-here").text("Pусский");
    setCookie("ru");
  });
})

注意事项 #

• 你需要把CSS里原来对应土耳其语的.selected-lang类改成.selected-langtr，和代码里的配置保持一致
• 确保这段JS在全站所有页面都引入，即可实现跨页保持国旗和语言选中状态的效果

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