当页面加载时,菜单元素加粗显示,并在点击时加粗另一个菜单元素,这是在WordPress中的操作
<p>我已经搜索了很长时间,但没有找到一个好的解决方案。
当我进入网站时,我希望菜单项DE加粗,如果我点击EN,我希望DE变回细体,EN变为加粗。</p>
<p>网站是:https://kxplaw.live-website.com</p>
<p>目前我成功地以加粗的方式显示了具有current-menu-item类的元素,但这不包括我首次打开页面时的元素。</p>
<p>我尝试过使用JavaScript,但我不太确定如何使其工作。</p>
转到
外观 -> 菜单,然后在右上角点击屏幕选项。然后(如果未选中),勾选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"}) }现在每个页面上选定的语言将会加粗显示。