当页面加载时，菜单元素加粗显示，并在点击时加粗另一个菜单元素，这是在WordPress中的操作

Question

我已经搜索了很长时间，但没有找到一个好的解决方案。 当我进入网站时，我希望菜单项DE加粗，如果我点击EN，我希望DE变回细体，EN变为加粗。

网站是：https://kxplaw.live-website.com

目前我成功地以加粗的方式显示了具有current-menu-item类的元素，但这不包括我首次打开页面时的元素。

我尝试过使用JavaScript，但我不太确定如何使其工作。

Answer 1

转到 外观 -> 菜单，然后在右上角点击 屏幕选项。然后（如果未选中），勾选 CSS 类 选项，并为每个菜单项添加新的字段 CSS 类（可选），并为 EN 和 DE 添加类 menu-language。

仅对于 DE 添加类 lang-DE

仅对于 EN 添加类 lang-EN

现在附加到点击事件上

// 点击时将添加会话存储语言参数
jQuery(document).on("click", ".menu-language", function(){
    var lang = jQuery(this).text();
    sessionStorage.setItem("language", lang);
});

// 每次页面加载时，我们检查语言参数，然后加粗选定的语言
// 默认值为 "DE"
var language = sessionStorage.getItem("language") ?? 'DE';
if(language != null) {
    jQuery(".lang-" + language).css({"font-weight": "bold"})
}

现在每个页面上选定的语言将会加粗显示。