使用静态页面插件在OctoberCMS上导航

问题描述

我正在使用October CMS开发登陆页面，并使用“静态页面”插件。 这是我的带有导航的header.htm文件：

<div class="header" id="header">
    <div class="container">
        <div class="header__inner">
            <div class="header__logo">
                <img src="{{ 'assets/img/logo.svg'|theme }}" alt="logo" class="logo">
            </div>
            <nav class="nav" id="nav">
                {% partial 'menu-items' items=staticmenu.menuItems class='nav__list' %}
            </nav>
        </div>
    </div>
</div>

如果我使用的是一种页面布局，并且希望菜单项单击上的确切部分处于活动状态（而不是现在的单独页面），那么问题是如何修改基本的menu-items.htm部分。

目前，我有包含此类项目的菜单，并希望在单击时激活这些部分之一：

/,/#about,/#projects,/#contacts.

我的menu-items.htm部分如下：

<ul class="{{ class }}">
    {% for item in items %}
        <li 
            class="nav__item {{ item.isActive or item.isChildActive ? 'active' : '' }} 
            {{ item.items ? 'dropdown' : '' }}"
        >
            <a class="nav__link"
                {% if item.items %}class="dropdown-toggle" data-toggle="dropdown"{% endif %} 
                href="{{ item.url }}"
            >
                {{ item.title }}

                {% if item.items %}<span class="caret"></span>{% endif %}
            </a>

            {% if item.items %}
                {% partial 'menu-items' items=item.items class='dropdown-menu' %}
            {% endif %}
        </li>
    {% endfor %}
</ul>

此刻，menu-items.htm中的部分if语句中的代码由于此行而在点击时添加了“活动”类：

<li class="nav__item {{ item.isActive or item.isChildActive ? 'active' : '' }} {{ item.items ? 'dropdown' : '' }}"

...这是因为单击精确菜单项时，项“ isActive”属性为“ true”。但是我的问题是，如何在菜单导航中对节链接执行相同的操作（添加“活动”类），因为我的项目中只有一页“主页”，而其中只有几个节。因此，当有人单击eaxmple“关于”链接并滚动到/＃about部分时，我希望菜单导航链接在固定导航上处于活动状态。

解决方法

我只写了几行Jquery（感谢Pettis Brandon建议）。

$('.nav__item').click(function(){
  $('.nav__item').removeClass('active');
  $(this).addClass('active')
});

它从'.nav__item'类中删除'active'类，然后基于{{item.url}}在相应的链接上再次添加它。希望它也对其他人（使用静态页面插件）有所帮助。