Making a menu element bold when the page loads and bolding another menu element on click, here's what to do in WordPress
P粉547362845
P粉547362845 2023-08-18 11:19:20
0
1
481
<p>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. </p> <p>The website is: https://kxplaw.live-website.com</p> <p>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. </p> <p>I've tried using JavaScript but I'm not quite sure how to make it work. </p>
P粉547362845
P粉547362845

reply all(1)
P粉718730956

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.

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!