如何让导航面板根据活动页面更改颜色？

Question

目前正在为大学的技术部门完成我的第一个大学外独立项目。主页看起来像this。

我想要发生的是当用户在该页面上时，导航（主页，联系人等）与hover上显示的内容一样。没有第二个类或id在它的相应页面上表示它是否有另一种方式？

HTML

<div id="wrap">
<div id="header">
    <img src="">
    <ul>
        <li><a href="#">EXTONE</a>
        </li>|
        <li><a href="#">EXTTWO</a>
        </li>|
        <li><a href="#">EXTTHREE</a>
        </li>
    </ul>
</div>
<div id="nav">
    <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="contact.html">Contact</a>
        </li>
        <li><a href="news.html">News</a>
        </li>
        <li><a href="services.html">Services</a>
        </li>
        <li><a href="#">Submit a Ticket</a>
        </li>
    </ul>
</div>

CSS

html, body {
margin: 0;
padding: 0;
color: #222;
background: -webkit-linear-gradient(#0026aa, white);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#0026aa, white);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#0026aa, white);
/* For Firefox 3.6 to 15 */
background: linear-gradient(#0026aa, white);
/* Standard syntax */
}
body {
padding: 10px;
font: 76%/150%"Lucida Grande", "Lucida Sans Unicode", Lucida, Verdana,      Geneva, Arial, Helvetica, sans-serif;
}
#nav {
margin: 0;
padding: 0;
background: none;
width: 100%;
float: left;
border-bottom: 3px solid #cbcc9d;
}
#nav li {
display: inline;
padding: 0;
margin: 0;
}
#nav a:link, #nav a:visited {
color: #000;
background: #cbcc9d;
padding: 20px 40px 4px 10px;
float: left;
width: auto;
border-right: 1px solid #42432d;
text-decoration: none;
font: bold 1em/1em Arial, Helvetica, sans-serif;
text-transform: uppercase;
}
#nav a:hover, #nav a:focus {
color: #fff;
background: #727454;
}
#nav li:first-child a {
border-left: 1px solid #42432d;
}
#home #nav-home a, #contact #nav-contact a, #news #nav-news a, #services     #nav-services a {
background: #e35a00;
color: #fff;
text-shadow: none;
}
#home #nav-home a:hover, #contact #nav-contact a:hover, #news #nav-news     a:hover, #services #nav-services a:hover {
background: #e35a00;
}
#nav a:active {
background: #e35a00;
color: #fff;
}
#wrap {
width: 960px;
margin: 0 auto;
background: none;
}
#header {
padding: 5px 10px;
background: none;
padding-top: 25px;
text-align: right;
}
#header li {
display: inline;
list-style-type: none;
}
#header li a {
text-decoration: none;
color: #cbcc9d;
font-weight: bold;
}    
#header img {
display: block;
float: right;
}
h1 {
margin: 0;
}
#main {
float: left;
width: 530px;
height: 763px;
padding: 10px;
background: white;
border-right: 1px solid #cbcc9d;
}
h2 {
margin: 0 0 1em;
}
#sidebar {
float: right;
width: 350px;
height: 763px;
padding: 10px;
background: white;
padding-right: 4em;
}
#footer {
clear: both;
padding: 5px 10px;
background: #cc9;
}
#footer p {
margin: 0;
}
* html #footer {
height: 1px;
}
#ServicesListCol {
float: left;
overflow-y: scroll;
overflow-x: hidden;
display: block;
width: 530px;
height: 665px;
}
#ServicesListCol h4 {
font-weight: bold;
font-size: 12pt;
text-decoration: none;
}
#ServicesListCol ul li a {
text-decoration: none;
font-size: 10pt;
font-weight: normal;
}
#LetterNav {
text-align: center;
}
#LetterNav a {
text-decoration: none;
}
a {
text-decoration: none;
color: #0026aa
}
a:visited {
color: #0026aa
}
a:hover {
text-decoration: underline;
}

我在后面的页面上使用了一些JavaScript，我在另一个上面发生了Spry手风琴，但我不知道XHTML，CSS3和＆amp; JavaScript轮椅足以随意做到。

Answer 1

我会KISS它，并使用一个应用于所选项目的选定类。你没有说明菜单是否是在每次加载页面时动态生成的，或者其他什么，所以我不能更详细地告诉你如何做到这一点。

Answer 2

现在，为简单起见，您只需将相应的ID添加到每个页面即可。像这样（在示例主页中处于活动状态）：

<强> HTML

<li id="active"><a href="#">Home</a> 
</li>

然后，您可以为每个页面设置active ID样式。现在这将是简单而乏味的方式。如果你使用PHP include，这将无法工作。如果你使用PHP include，请告诉我，因为我有更好的方法来做到这一点！ ：）