javascript 动态设置导航的活动状态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15005731/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set active state on navigation dynamically
提问by user1696090
I seem to run into this problem frequently and can never find a solution. I have a Wordpress site with a top navigation. Since this is in my header.php, and used on all pages, I cannot hardcode my active menu state for each page.
我似乎经常遇到这个问题，永远找不到解决方案。我有一个带有顶部导航的 Wordpress 网站。由于这是在我的 header.php 中，并在所有页面上使用，我无法为每个页面硬编码我的活动菜单状态。
How can I dynamically set the activate state to work for each page?
如何动态设置激活状态以适用于每个页面？
Here is my current nav code:
这是我当前的导航代码：
<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>
I've already setup a CSS class called "active" that has my active state properties. Ideally, what I'm looking for is when your on the "About" page (or any of the other pages), the class I created for the active state will be appended to the current li classes's.
我已经设置了一个名为“active”的 CSS 类，它具有我的活动状态属性。理想情况下，我正在寻找的是当您在“关于”页面（或任何其他页面）上时，我为活动状态创建的类将附加到当前 li 类的。
Example:
例子：
<li class="cemenu active"><a href="<?php echo $base_url;?>/about">About</a></li>
Thanks!
谢谢！
回答by Pete
you could try something along the lines of
你可以尝试一些类似的东西
<li class="cemenu<?php echo ($_SERVER['PHP_SELF'] == '/about' ? ' active' : '');?>"><a href="<?php echo $base_url;?>/about">About</a></li>
回答by Jai
You can do this way:
你可以这样做：
This will add the activeclass to the <a>which contains the pagefrom the url.
这会将active类添加到<a>包含page来自 url 的 。
$(function(){
var url = window.location.href;
var page = url.substr(url.lastIndexOf('/')+1);
$('.cemenu a[href*="'+page+'"]').addClass('active');
});
and if you want to add class to its parent li the replace the last line to this and css class should be like this:
如果您想将类添加到其父类 li，请将最后一行替换为 this 和 css 类应该是这样的：
.active a{
css
properties
for active li's a
}
// using closest
$('.cemenu a[href*="'+page+'"]').closest('li').addClass('active');
or
或者
// using parent
$('.cemenu a[href*="'+page+'"]').parent('li').addClass('active');
回答by Milche Patern
First, there is a css pseudo class prepared for styling 'active' links :
首先，有一个 css 伪类用于设置“活动”链接的样式：
a:active {css}
For your situation, you would have to add this class to your styling :
对于您的情况，您必须将此类添加到您的样式中：
.active a, a:active {css}
But your needs seems more on the PHP side than the CSS, perhaps someone else will help you with that part. There would be a javascript solution with jQuery, finding the actual location then inject a css selector to the proper element.
但是您的需求似乎更多是在 PHP 方面而不是 CSS，也许其他人会在这部分帮助您。将有一个带有 jQuery 的 javascript 解决方案，找到实际位置，然后将 css 选择器注入正确的元素。
Check this articleand this other oneabout wordpress. It will help you.
查看这篇文章和另一篇关于 wordpress 的文章。它会帮助你。
Stack Overflow references :
堆栈溢出参考：
回答by Andrew
try something like this:
尝试这样的事情：
<?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>
It may be worth looking into using wordpres functions such as get_page_link which would be nicer than using the Server super global as that's not nice. This would also fail if you have wordpress in a folder and not the document root, it's just a simple example to get you started :)
可能值得考虑使用诸如 get_page_link 之类的 wordpres 函数，这比使用 Server super global 更好，因为那不好。如果您在文件夹中而不是文档根目录中有 wordpress，这也会失败，这只是一个让您入门的简单示例:)
回答by Tjeu Kayim
You could use preg_replace() to add class="active"like this:
您可以使用 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);
回答by santosh devnath
You can try like this
你可以这样试试
<li class="<?php
if($this_page=='Home'){
echo 'active';
}
?>">
Home
</li>
<li class="<?php
if($this_page=='Contact'){
echo 'active';
}
?>">
Contact
</li>
And then in your home page
然后在你的主页
$this_page='Home';
And in your contact page
并在您的联系页面
$this_page='Contact';
