动态导航设置活动状态

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

例子：

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

谢谢！

来源

2013-02-21 user1696090

感谢您的真棒问题！ #DIY一路顺风！ – 0bserver07 2013-06-18 01:04:53

你可以尝试一些沿着

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

来源

2013-02-21 15:23:42 Pete

嘿皮特，这几乎工作。出于某种原因，您的<？php echo $ _SERVER ['PHP_SELF']; ？>正在返回/index.php而不是/关于 – user1696090 2013-02-21 15:33:53

啊你在使用url重写吗？ – Pete 2013-02-21 15:34:59

嗯，在Wordpress中，我将我的固定链接更改为帖子名 – user1696090 2013-02-21 15:36:14

你可以这样说：

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

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

just tryout the fiddle here

来源

2013-02-21 15:22:28 Jai

谢谢！这也有效，但更喜欢PHP路线。 – user1696090 2013-02-21 15:42:56

噢，太棒了，很高兴看到你为你的问题得到了解决方案。感谢您的考虑。 – Jai 2013-02-21 15:44:31

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

a:active {css}

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

.active a, a:active {css}

但是您的需求似乎更多地在PHP方面比CSS，也许别人会帮助你的那部分。将有一个JavaScript解决方案与jQuery，找到实际的位置，然后注入一个CSS选择器到正确的元素。

检查this article和this other one关于wordpress。它会帮助你。

堆栈溢出引用：

来源

2013-02-21 15:26:22

尝试这样的事：

<?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的这也会失败，它只是一个简单的例子，让你开始:)

来源

2013-02-21 15:39:26 Andrew

你可以使用的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-31 16:33:33

-1

你可以尝试这样的

<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-07 11:44:01

动态导航设置活动状态

回答

相关问题