动态设置导航的活动状态

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>

谢谢!

Answer 1

你可以这样做:

这会将active类添加到<a>包含pageurl的类中.

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

如果要将类添加到其父li,则将最后一行替换为this,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');

只是试试这里的小提琴

Answer 2

你可以试试一下

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