Add class with the help of JavaScript snippet and jQuery.

My use case here is the following: I am developing a mobile app with a bottom menu with buttons, like ‘Home’, ‘account’ etc, that need to change color if the corresponding page is selected.  So I am using the Javascript Snippet from the Mendix App store. In the snippet I use the following code: $( document ).ready(function() {     if ($(".home-page")[0]){         $(".bottom-menu-navigation li").eq(0).addClass( "active" );     } The class “.home-page” is added to the page. Most of the time it works fine. The li element is set active and I can apply some CSS styling, but there can be multiple pages that falls for example ‘home’ section and if I navigate to another page with “home-page”, it doesn’t work. It gets activated, because I can get alert messages, but for some reason the element doesn’t get class “active” assigned. Can someone please give me some hint what could be the solution or maybe there is a better way. 
1 answers

Hello Armands,

You can try removing the document ready part of your jQuery if you deploy a HTML snippet on each page.

This way the snippet should be executed immediately instead of waiting for a document ready event. 

The HTML snippet should load after the menu – in this case it should work:

if ($(".home-page")[0]){
        $(".bottom-menu-navigation li").eq(0).addClass( "active" );

You can also use a dirty alternative of creating a different layout for your main navigation pages which need different active tags and adding a menu item with a hardcoded class for each page. 

Hope this helps