Question

我已经在ModX中对网站的导航进行了硬编码，我突然意识到我需要在用户所在页面的相关链接中添加一个类。

所以，当我在our-services.html上时，我需要使用our-services链接来增加一个类。

事后才有可能吗？

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

在ModX中向页面（硬编码）导航链接添加一个类

2 个答案: