добавление класса на страницу (жестко закодированная) навигация в ModX

Question

Я жестко закодировал навигацию по сайту в ModX, и мне просто стало интересно, что мне нужно добавить класс к соответствующей ссылке для страницы пользователь включен.

Итак, когда я нахожусь в нашем-services.html Мне нужна ссылка наших сервисов для добавления класса добавления.

Возможно ли это, оглядываясь назад?

Это HTML

<!-- Navigation --> 
<nav> 

    <ul class="menu"> 
    <li> 
      <a href="our-services" title="Our Services">Our Services</a> 
      <ul class="sub-nav"> 
       <li><a href="our-services/networking-events">Network &amp; Evens</a></li> 
      </ul> 
     </li> 
     <li> 
      <a href="who-we-work-with" title="Our Clients" >Our Clients</a> 
     </li> 
     <li> 
      <a href="testimonials">Testimonials</a> 
     </li> 
     <li><a href="blog" title="News & Events" >News & Events</a></li> 
     <li> 
      <a href="overview" title="Our Services">About Us</a> 
      <ul class="sub-nav"> 
       <li><a href="our-network">Our Network</a></li> 
       <li><a href="sectors-and-themes">Sectors &amp; Themes</a></li> 
       <li><a href="our-team">Our Team</a></li> 
      <li><a href="working-for-the-up-group">Working For Us</a></li> 
      </ul> 
     </li> 
     <li class="last"><a href="contact" title="Contact Us" >Contact Us</a></li> 
</ul> 

</nav> 
<!-- End Navigation --> 

К сожалению подменю фактически не подстраниц (устаревший сайт, не спрашивайте). Мне нужно только добавить класс к ссылке верхнего уровня (класс активных).

Answer 1

простой, хотя и не совсем элегантное решение было бы что-то вроде этого внутри закодированного меню:

[[*id:eq=`link resource id`:then=`class="active"`]] 

Использование сниппета Wayfinder, вероятно, будет проще, так как он делает это по умолчанию, но я полагаю, вы имели свои причины для жесткого кодирования меню.

Answer 2

вы также можете попробовать это решение отсюда: Change class when page is active

<script> 
    $(document).ready(function(){ 

     var links = $('nav').children(); 
     $.each(links, function(key, value){ 
      if(value.href == document.URL){ 
      $(this).addClass('current_page_item'); 
      } 
     }); 
    </script> 
    <nav> 
     <a href="/link1">link-1</a> 
     <a href="/link2">link-2</a> 
     <a href="/link3">link-3</a> 
     <a href="/link4">link-4</a> 
     <a href="index.html">link-5</a> 
    </nav>