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

我建议在导航项中添加一个活动类。像这样：

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

然后是CSS：

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

Answer 2

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

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

请告诉我这是否有帮助！

突出显示当前页面菜单li

2 个答案: