菜单元素在进入页面时加粗，并在单击 WordPress 时加粗另一个菜单元素

Question

我已经寻找答案很长时间了，但还没有找到好的解决方案。 我希望当我进入网站时菜单项 DE 变粗，如果我单击 EN，我希望 DE 再次变细，EN 变粗。

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

目前，我设法以粗体显示带有当前菜单项类的元素，但当我首先打开页面时，它不包含该元素。

我已经尝试过使用 Javascript，但我不太确定如何让它工作。

---

现在它仍然不起作用 - 不幸的是。 在我的 JS 中，我有以下内容：

jQuery(document).ready(function($) 
{ 
  jQuery(document).on("click", ".menu-language", function(){
  var lang = jQuery(this).text();
  sessionStorage.setItem("language", lang);
});
  var language = sessionStorage.getItem("language") ?? 'DE';
  if(language != null) {
  jQuery(".lang-" + language).css({"font-weight": "bold"})
} 
});

现在的问题是我必须在 DE 或 EN 上单击两次才能使其变为粗体。有谁知道在这种情况下我能做什么？ 默认情况下，它在 DE 上不是粗体。

Answer 1

转到

Appereance -> Menus

，然后点击右上角的

Screen Options

。然后（如果未选中）选中选项

CSS Classes

，现在对于每个菜单项，您都有新字段

CSS Classes (optional)

并为

menu-language

和

EN

 添加类 

DE

并且仅适用于

DE

添加课程

lang-DE

并且仅适用于

EN

添加课程

lang-EN

现在附加到点击事件

// On click will add session storage language param
jQuery(document).on("click", ".menu-language", function(){
    var lang = jQuery(this).text();
    sessionStorage.setItem("language", lang);
});

// On every page load we check lang param and than we bold selected language
// Default value will be "DE"
var language = sessionStorage.getItem("language") ?? 'DE';
if(language != null) {
    jQuery(".lang-" + language).css({"font-weight": "bold"})
}

现在在每个页面上选择的语言都会以粗体显示。