如何在单击时突出显示导航中的选定链接

Question

  

可能重复：
  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>

Answer 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; }