0

我已经在 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 -->

不幸的是，子菜单实际上并不是子页面（旧网站，不要问）。我只需要在顶层链接中添加一个类（一个活动的类）。

4

2 回答 2

1

一个简单但不完全优雅的解决方案在硬编码菜单中是这样的：

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

默认情况下，使用 Wayfinder 片段可能会更容易，但我想您有理由对菜单进行硬编码。

于 2013-09-19T21:47:13.257 回答
0

你也可以从这里尝试这个解决方案：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>
于 2013-09-20T01:41:15.660 回答