javascript - 如何让我的导航面板根据事件页面更改颜色？

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 Accordion ，但我对 XHTML、CSS3 和 JavaScript 之外的知识了解不够，无法立即完成。

Answer 1

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