在导航栏上动态设置活动状态

Question

我似乎经常遇到这个问题，但从未找到解决方法。我有一个带顶部导航的WordPress网站。由于这是在我的header.php文件中使用，并用于所有页面，因此我无法为每个页面硬编码我的活动菜单状态。

如何动态设置激活状态以适用于每个页面？

这是我的当前导航代码：

<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类的末尾。

例如：

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

谢谢！

- user1696090

---

感谢您提出这个棒极了的问题！#自己动手，走起！ - 0bserver07

Answer 1

您可以尝试类似以下的操作：

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

- Pete

---

嘿，皮特，这个几乎可以工作了。由于某种原因，你的：<?php echo $_SERVER['PHP_SELF']; ?> 返回的是/index.php而不是/about。 - user1696090

啊，你在使用URL重写吗？ - Pete

哦，我在WordPress中将我的永久链接更改为文章名称。 - user1696090

这是地址栏中的URL：/ibis/website/about/，但所有页面都返回为/ibis/website/index.php。 - user1696090

尝试使用 $_SERVER['REQUEST_URI'] 或执行 print_r($_SERVER) 来查看哪个变量最匹配 - 我已经有一段时间没有写 PHP 了！ - Pete

Answer 2

你可以这样做：

这会将“active”类添加到包含URL中的“page”的标签。

$(function(){
   var url = window.location.href;
   var page = url.substr(url.lastIndexOf('/')+1);
   $('.cemenu a[href*="'+page+'"]').addClass('active');
});

如果您想将类添加到其父li，则将最后一行替换为以下内容，并且css类应该像这样：

.active a{
      css 
      properties 
      for active li's a
}

 // using closest
$('.cemenu a[href*="'+page+'"]').closest('li').addClass('active'); 

或者

// using parent
$('.cemenu a[href*="'+page+'"]').parent('li').addClass('active');

在这里试用一下代码编辑器

- Jai

---

太好了，很高兴看到你解决了问题。感谢你的考虑。 - Jai

Answer 3

你可以像这样尝试。

<li class="<?php 
                if($this_page=='Home'){
                     echo 'active';
                }
          ?>">
      Home
 </li>
<li class="<?php 
                if($this_page=='Contact'){
                     echo 'active';
                }
          ?>">
      Contact
 </li>

然后在您的主页上。

$this_page='Home';

在您的联系页面中

$this_page='Contact';

- santosh devnath

Answer 4

首先，有一个用于样式化“active”链接的CSS伪类：

a:active {css}

针对您的情况，您需要将以下类添加到样式中：

.active a, a:active {css}

但是你的需求似乎更多地涉及PHP而不是CSS，也许其他人会帮助你解决这个问题。使用jQuery有一种JavaScript解决方案，可以找到实际位置，然后将CSS选择器注入到正确的元素中。

查看这篇文章和另一篇文章，了解关于WordPress的更多信息。它会帮助你的。

Stack Overflow参考：

• 如何在WordPress中针对每个菜单不同项的活动状态进行定位
• 如何在WordPress wp_nav_menu()中添加活动状态和图标
• 在WordPress动态菜单中丢失导航活动状态
• 谷歌搜索

- Milche Patern

Answer 5

尝试像这样做些事情：

<?php $pages = array('about' => 'About Us', 'blog' => 'blog') ?>

<ul>
<?php foreach($pages as $url => $page): ?>
    <?php $isActive = $_SERVER["REQUEST_URI"] == $url ?>
    <li<?php echo $isActive ? ' class="active"' : '' ?>>
        <a href="<?php echo $base_url . "/{$url}" ?>"><?php echo $page ?></a>
    </li>
<?php endforeach ?>
</ul>

可能值得研究使用Wordpress函数，如get_page_link，这比使用Server超级全局变量更好。如果你将Wordpress安装在文件夹中而不是文档根目录中，这种方式也会失败，这只是一个简单的示例，让你开始了解 :)

- Andrew

Answer 6

你可以使用 preg_replace() 函数来添加 class="active"，代码如下：

ob_start();
echo '<ul>
  <li><a href="page1.php">Page 1</a></li>
  <li><a href="page2.php">Page 2</a></li>
  </ul>';
$output = ob_get_clean();
$pattern = '~<li><a href="'.$url.'">~';
$replacement = '<li class="active"><a href="'.$url.'">';
echo preg_replace($pattern, $replacement, $output);

- 278342304