WordPress语言菜单默认高亮及点击切换高亮问题求助

原代码核心问题 #

1. 未清除历史高亮样式：切换语言时旧的粗体元素不会自动恢复，导致需要两次点击才能覆盖原有样式
2. 点击事件未即时更新视觉反馈：仅存储了语言标识，没有在点击时立刻触发样式变更
3. 文本匹配存在误差：text()会获取元素内的冗余空白字符（空格、换行），导致生成的选择器（如.lang- DE带空格）无法精准匹配目标元素
4. 兼容性隐患：??是ES2020新增的空值合并运算符，部分旧浏览器不支持

修正后的代码 #

jQuery(document).ready(function($) {
    // 封装高亮逻辑，复用性更强
    function setActiveLang(lang) {
        // 先重置所有语言项的样式
        $('.menu-language').css('font-weight', 'normal');
        // 去除文本前后空白，避免选择器匹配失败
        const targetLang = lang.trim();
        // 给目标语言项设置粗体
        $(`.lang-${targetLang}`).css('font-weight', 'bold');
        // 更新本地存储
        sessionStorage.setItem('language', targetLang);
    }

    // 页面初始化：优先取本地存储，默认DE
    const initLang = sessionStorage.getItem('language') || 'DE';
    setActiveLang(initLang);

    // 语言菜单点击事件
    $(document).on('click', '.menu-language', function() {
        const currentLang = $(this).text();
        setActiveLang(currentLang);
    });
});

进阶优化建议（推荐） #

用CSS类控制样式比直接操作行内样式更易维护，也能避免样式冲突：

1. 先在主题样式表中添加类：

.lang-active {
    font-weight: bold !important;
}

2. 修改JS逻辑为类操作：

jQuery(document).ready(function($) {
    function setActiveLang(lang) {
        $('.menu-language').removeClass('lang-active');
        const targetLang = lang.trim();
        $(`.lang-${targetLang}`).addClass('lang-active');
        sessionStorage.setItem('language', targetLang);
    }

    const initLang = sessionStorage.getItem('language') || 'DE';
    setActiveLang(initLang);

    $(document).on('click', '.menu-language', function() {
        setActiveLang($(this).text());
    });
});

3. 额外验证：通过浏览器开发者工具（F12）确认.lang-DE、.lang-EN、.menu-language这些类名确实存在于对应的菜单项元素上

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