Making a menu element bold when the page loads and bolding another menu element on click, here's what to do in WordPress

Question

I've searched for a long time but didn't find a good solution. When I enter the site, I want the menu item DE to be bold, and if I click EN, I want DE to go back to thin, and EN to be bold.

The website is: https://kxplaw.live-website.com

Currently I successfully display elements with the current-menu-item class in bold, but this does not include the elements when I first open the page.

I've tried using JavaScript but I'm not quite sure how to make it work.

Answer 1

Go to Appearance -> Menu and click Screen Options in the upper right corner. Then (if unchecked), check the CSS Classes option and add a new field for each menu item CSS Classes (optional) and EN and DE add class menu-language.

Only for DE Add class lang-DE

Only for EN Add class lang-EN

Now attached to click event

// 点击时将添加会话存储语言参数
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"})
}

The selected language will now be bolded on every page.