Help please solve problems.

I use rails5 with gem turbolinks. Here is the menu code for my site:

<div id="templatemo_menu" class="ddsmoothmenu"> <ul> <li><a class="level_0 index" href="/">Главная</a></li> <li><a class="level_0 about" href="/pages/about">О нас</a></li> <li><a class="level_0 portfolio" href="/type_works">Портфолио</a> <ul> <li><a class="level_1" href="/works?type_work_id=1">Corporate Metrics Liaison</a></li> <li><a class="level_1" href="/works?type_work_id=2">Chief Solutions Planner</a></li> <li><a class="level_1" href="/works?type_work_id=3">Central Applications Architect</a></li> <li><a class="level_1" href="/works?type_work_id=4">Global Metrics Executive</a></li> </ul> </li> <li><a class="level_0 blog" href="/blog_articles">Блог</a></li> <li><a class="level_0 contact" href="/contact_messages/new">Контакт</a></li> </ul> <br style="clear: left"> </div>

I would like that after clicking on "About us" the background color of BODY changes to red. And all this would occur on the basis of parsing the address bar. Here is my attempt at solving:

 var menuActivePunkt = function(){ var pathname = location.pathname, pathnameList = pathname.split('/'), slug1 = pathnameList[1], slug2 = pathnameList[2]; console.log('slug1', slug1); console.log('slug2', slug2); $('#templatemo_menu a').removeClass('selected').on('click', function() { if(slug1 == 'pages' && slug2 == 'about') { //$('.index').addClass('selected'); $('body').css({'background': 'red'}); }; }); } $( document ).on('turbolinks:load', function() { menuActivePunkt(); })

The problem is that after I click on the "About us" item, the background color of BODY changes to red for a split second, but then turns white again. I do not understand this, I need it to remain red. Please help me do it

    1 answer 1

     $('#templatemo_menu a').removeClass('selected').on('click', function() { if(slug1 == 'pages' && slug2 == 'about') { //$('.index').addClass('selected'); $('body').css({'background': 'red'}); }; });

    change to

     if(slug1 == 'pages' && slug2 == 'about') { //$('.index').addClass('selected'); $('body').css({'background': 'red'}); }

    and with classes <a> we work separately

    • Do you know what Turbolinks are and why are there problems from it? :) - D-side
    • Apparently, people meant that you need to embed this piece not in the head, but in the body. Thus, forcing each time you change the page to work out the script again. But it does not work. The problem remains the same - cyklop77
    • I disassembled, turbolinks had nothing to do with it. Denis is right - ".on ('click'," had to be removed altogether - cyklop77