<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是否与导航菜单项的链接相同,如果相同则为菜单项添加一个指定的类名。
- $_SERVER['REQUEST_URI'] 用于获取当前页面的完整URL。
- 使用条件语句判断菜单项的链接是否为根路径 /。
- 如果是根路径,则判断当前URL是否也为根路径,如果相同则为菜单项添加类名 NItemCur,否则不添加。
- 如果菜单项的链接不是根路径,则使用 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/