php - 高亮当前页面菜单 li

Question

有没有办法让我根据页面 id 突出显示菜单 li？我似乎无法找到一种方法来做到这一点。

http://www.dawaf.co.uk/cthm/work/

<div id="header">
    <h1>
        <a href="http://www.dawaf.co.uk/cthm/work">
            <img src="http://www.dawaf.co.uk/cthm/wp-content/uploads/2013/01/logo2.png" alt="CTHM Logo" id="logo" width="140" height="44" />    
        </a>
        <div id="contact-details">
            26 Queen Anne Road, London, E9 7AH<br />
            t + 44 7912325101<br />
            <a href="mailto:hello@cthm.co.uk">hello@cthm.co.uk</a>
        </div>
    </h1>
    <div id="nav">
        <span id="nav-li">
            <a href="http://www.dawaf.co.uk/cthm/work/" class="work-current">Work</a>
            <a href="http://www.dawaf.co.uk/cthm/studio/" class="studio-current">Studio</a>
            <a href="http://cthmplus.tumblr.com/" target="_blank">CTHM&#43;</a>
            <a href="https://twitter.com/hello_cthm" target="_blank">
                <img src="http://www.dawaf.co.uk/cthm/wp-content/uploads/2013/01/twitter.png" alt="Twitter" width="13" height="13">
            </a>
        </span>
    </div>
</div>

<div id="content">

Answer 1

你有两个选择。一个是 Zak 提到的，您需要使用 jQuery 为您的网站一次仅将一个项目标记为“活动”。另一个选项是 CSS :active 选择器，它将自动将 CSS 应用到正在使用的链接（目前）。例如：

#nav li a:active {
  /* Insert styling here, such as, background-color: #01B */
}

让我知道这是否有帮助！

Answer 2

我建议向导航项添加一个活动类。像这样的东西：

<a href="http://www.dawaf.co.uk/cthm/work/" class="active">Work</a>

然后是 CSS：

#nav a.active {
  /* your active style here */
}