在导航设置活动状态动态(Set active state on navigation dynamic

我似乎经常碰到这个问题，从来没有找到一个解决方案。我有一个顶部导航一个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>

我已经设置一个CSS类叫做有我的激活状态属性“激活”。理想情况下，我正在寻找的是当你的“关于”页面（或任何其他网页）上，我为激活状态创建的类将被附加到当前李类的。

例：

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

谢谢！

Answer 1:

你可以尝试沿着东西线

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

Answer 2:

你可以这样说：

这将增加active类的<a>其中包含page从URL。

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

如果你想添加类其父李的最后一行替换这个和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 3:

首先，有一个造型“主动”联系准备了CSS伪类：

a:active {css}

对于你的情况，你就必须将该类添加到您的样式：

.active a, a:active {css}

但是，您的需求似乎更在PHP端比CSS，也许别人会帮助你的那部分。将有与jQuery一个JavaScript溶液，然后找到实际位置CSS选择注入到适当的元件。

检查这篇文章和该另一个关于WordPress。它会帮助你。

堆栈溢出引用：

如何定位在WordPress的活动状态每个菜单项不同
如何添加活动状态和图标在WordPress wp_nav_menu（）
失去导航活动状态的WordPress动态菜单
谷歌搜索

Answer 4:

尝试是这样的：

<?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>

这可能是值得探讨使用wordpres功能，如get_page_link这比使用服务器的超级全球因为这是不好听更好。如果你的文件夹，而不是文档根有WordPress的这也会失败，它只是一个简单的例子，让你开始:)

Answer 5:

你可以使用的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);

Answer 6:

你可以尝试这样的

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

然后在您的主页