动态导航设置活动状态
我似乎经常遇到这个问题,永远找不到解决方案。我有一个顶部导航的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>
谢谢!
你可以尝试一些沿着
<li class="cemenu<?php echo ($_SERVER['PHP_SELF'] == '/about' ? ' active' : '');?>"><a href="<?php echo $base_url;?>/about">About</a></li>
嘿皮特,这几乎工作。出于某种原因,您的正在返回/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');
谢谢!这也有效,但更喜欢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。它会帮助你。
堆栈溢出引用:
尝试这样的事:
<?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的这也会失败,它只是一个简单的例子,让你开始:)
你可以使用的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);
你可以尝试这样的
<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';
感谢您的真棒问题! #DIY一路顺风! – 0bserver07 2013-06-18 01:04:53