5

我似乎经常遇到这个问题，永远找不到解决方案。我有一个带有顶部导航的 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>

谢谢！

4

6 回答 6

7

你可以尝试一些类似的东西

<li class="cemenu<?php echo ($_SERVER['PHP_SELF'] == '/about' ? ' active' : '');?>"><a href="<?php echo $base_url;?>/about">About</a></li>
于 2013-02-21T15:23:42.407 回答
5

你可以这样做：

这会将active类添加到<a>包含page来自 url 的类。

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

只是在这里试用小提琴

于 2013-02-21T15:22:28.097 回答
1

尝试这样的事情：

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

可能值得考虑使用诸如 get_page_link 之类的 wordpres 函数，这比使用 Server super global 更好，因为这并不好。如果您在文件夹中有 wordpress 而不是文档根目录，这也会失败，这只是一个简单的示例，让您开始:)

于 2013-02-21T15:39:26.300 回答
1

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

a:active {css}

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

.active a, a:active {css}

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

查看这篇文章和另一篇关于 wordpress 的文章。它会帮助你。

堆栈溢出参考：

于 2013-02-21T15:26:22.970 回答
0

你可以这样尝试

<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';
于 2016-01-07T11:44:01.280 回答
0

您可以使用 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);
于 2015-12-31T16:33:33.773 回答