【问题标题】：How to make selected link in Navigation highlighted when clicked [duplicate]单击时如何突出显示导航中的选定链接[重复]
【发布时间】：2012-07-24 20:32:16
【问题描述】：

可能重复：
How do I highlight a link based on the current page?

上下文

多年来，我一直在尝试让我的导航菜单中的选定链接在单击时保持突出显示，但我找不到任何体面且易于理解的教程。

问题

我该如何解决这个问题？
jQuery 还是 PHP 最适合这个？

代码

<ul>
    <li><a href="aboutus.php">ABOUT US</a>
        <ul>
            <li><a href="aboutus.php">Company</a></li>
            <li><a href="team.php">Team</a></li>
            <li><a href="careers.php">Careers</a></li>
        </ul>
    </li>

    <li><a href="ourwork.php">OUR WORK</a>
        <ul>
            <li><a href="ourwork.php">Portfolio</a></li>
            <li><a href="upcoming.php">Upcoming</a></li>
        </ul>
    </li>

    <li><a href="whatsnew.php">WHATS NEW</a>
        <ul>
            <li><a href="whatsnew.php">News</a></li>
            <li><a href="blog.php">Blog</a></li>
        </ul>
    </li>
</ul>

【问题讨论】：

我会说使用 JavaScript 或 jQuery，只需将 CSS 类添加到要突出显示的元素。
或者你可以只用css和html来做。很多方法可以解决它
看到这个w3schools.com/css/css_pseudo_classes.asp
没有服务器端处理是不可能的。
实际上你能澄清一下吗，如果我点击关于我们的链接，它会带我到那个页面，你想让关于我们的链接突出显示吗？还是你想要另一种行为？

标签： php html css navigation

【解决方案1】：

解决方案

清理器是在服务器端生成页面时，将current 类添加到选定的链接。

示例

根据您提供给我们的代码，我发现这个示例与您当前的架构很接近。

来源：http://www.finalwebsites.com/tutorials/css-navigation-bar.php

PHP

$items = array(
    array('link'=>'scripts.html', 'label'=>'PHP scripts'), 
    array('link'=>'tutorials.html', 'label'=>'Tutorial'), 
    array('link'=>'template.html', 'label'=>'CSS template'), 
    array('link'=>'examples.html', 'label'=>'Code examples')
);

$menu = '<ul>';

foreach ($items as $val) {
    $class = ($_SERVER['SCRIPT_NAME'] == $val['link']) ? ' class="current"' : '';
    $menu .= sprintf('<li><a href="%s">%s</a></li>', $val['link'], $val['label']);
}

$menu .= '</ul>';

echo $menu;

CSS

ul li a.current { background-color: #40611F; color: #FFFFFF; }

【讨论】：