动态设置导航的活动状态 [英] Set active state on navigation dynamically

问题描述

我似乎经常遇到这个问题，但却找不到解决方案。我有一个带顶部导航的Wordpress网站。由于这是在我的header.php中，并在所有页面上使用，我无法对每个页面的活动菜单状态进行硬编码。

I seem to run into this problem frequently and can never find a solution. I have a Wordpress site with a top navigation. Since this is in my header.php, and used on all pages, I cannot hardcode my active menu state for each page.

如何将激活状态动态设置为为每个页面工作？

How can I dynamically set the activate state to work for each page?

这是我当前的导航代码：

Here is my current nav code:

<nav id="main-menu" class="padbot">
<ul id="ce">
    <li class="cemenu"><a href="<?php echo $base_url;?>/about">About</a></li>
    <li class="cemenu"><a href="<?php echo $base_url;?>/consulting">Consulting</a></li>
    <li class="cemenu"><a href="<?php echo $base_url;?>/intelligence">Intelligence</a></li>
    <li class="cemenu"><a href="<?php echo $base_url;?>/academy">Academy</a></li>        
    <li class="cemenu"><a href="<?php echo $base_url;?>/blog">Blog</a></li>
    <li class="cemenu"><a href="<?php echo $base_url;?>/contact">Contact</a></li>
 </ul>

我已经设置了称为active的CSS类具有我的活动状态属性。理想情况下，我正在寻找的是当你在关于页面（或任何其他页面）时，我为活动状态创建的类将被附加到当前的li类。

I've already setup a CSS class called "active" that has my active state properties. Ideally, what I'm looking for is when your on the "About" page (or any of the other pages), the class I created for the active state will be appended to the current li classes's.

示例：

<li class="cemenu active"><a href="<?php echo $base_url;?>/about">About</a></li>

谢谢！

推荐答案

你可以尝试一下

<li class="cemenu<?php echo ($_SERVER['PHP_SELF'] == '/about' ? ' active' : '');?>"><a href="<?php echo $base_url;?>/about">About</a></li>

这篇关于动态设置导航的活动状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！