thinkcmf 导航激活状态联动(片段)

由 Jefsky 发布于 2024-06-13

<navigation nav-id="1" root="ul" id="main-navigation" class="nav navbar-nav navbar-nav-custom">
  <navigationmenu root="li" class="menu-item menu-item-level-{$level}"> <?php $currentUrl = $_SERVER['REQUEST_URI']; // 获取当前页面的完整URL
                        if ($menu['href'] == '/') {
                            $isActive = $currentUrl == '/'  ? 'NItemCur' : ''; 
                        } else {
                            $isActive = strpos($currentUrl, $menu['href']) !== false ? 'NItemCur' : ''; 
                        }

                    ?> <dd class="NItem {$key != 1 ?'': 'NFirst '} {$isActive}" data-subid="">
      <table class="NItemTable">
        <tr>
          <td class="NItemL"></td>
          <td class="NItemM"><a href="%7B%24menu.href%7Cdefault=''%7D" title="{$menu.name|default=''}">
              <span>{$menu.name|default=''}</span>
            </a></td>
          <td class="NItemR"></td>
        </tr>
      </table>
    </dd>
    <dd class="NLine"></dd>
  </navigationmenu>
</navigation>

用于判断当前页面的URL是否与导航菜单项的链接相同,如果相同则为菜单项添加一个指定的类名。

  1. $_SERVER['REQUEST_URI'] 用于获取当前页面的完整URL。
  2. 使用条件语句判断菜单项的链接是否为根路径 /。
  3. 如果是根路径,则判断当前URL是否也为根路径,如果相同则为菜单项添加类名 NItemCur,否则不添加。
  4. 如果菜单项的链接不是根路径,则使用 strpos 函数判断当前URL是否包含菜单项的链接,如果包含则为菜单项添加类名 NItemCur,否则不添加。
<script>
  $(function() {
      $('.menu-item:eq(2) .NItem').addClass('NItemCur');
  });
</script>

至于内页的导航状态,我用了jq来控制

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
作者:JefskyWong ——程序猿甜品店
链接:https://www.jefsky.com/blog/333
来源:https://www.jefsky.com/