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>

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

示例：

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

谢谢！

Answer 1

你可以这样做：

这会将active课程添加到<a>，其中包含来自网址的page。

$(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');

just tryout the fiddle here

Answer 2

你可以尝试一下

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

Answer 3

首先，有一个css伪类，用于样式化“活动”链接：

a:active {css}

根据您的情况，您必须将此类添加到样式中：

.active a, a:active {css}

但是你的需求在PHP方面似乎比CSS更多，也许其他人会帮助你完成这一部分。将有一个jQuery的javascript解决方案，找到实际位置，然后将css选择器注入正确的元素。

检查this article和this other one有关wordpress的信息。它会对你有所帮助。

Stack Overflow引用：

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，这比使用Server super global更好，因为这不是很好。如果您在文件夹而不是文档根目录中有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>

然后在您的主页

$this_page='Home';

在您的联系页面

$this_page='Contact';

动态设置导航的活动状态

6 个答案: