javascript - 事件涡轮链接 :load working strange

Question

请帮助我。我使用 Rails5 和 gem Turbolinks。我的导航菜单代码:

<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>

我需要在单击“.about”后，将 BODY 背景更改为红色。但现在点击BODY后背景没有改变。它的问题。

我尝试解决:

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();
})

Answer 1

当您在此页面上使用 JQuery 时。 所以

首先:您必须需要jquery-turbolinks gem。

第二:编辑您的app/assets/javascripts/application.js文件

//=需要jquery

//= 需要 jquery.turbolinks

//= 需要 Turbolinks

希望这对您有帮助!