當頁面載入時，選單元素加粗顯示，並在點擊時加粗另一個選單元素，這是在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"})
}

現在每個頁面上選定的語言將會加粗顯示。