html - 无法获得 :active to work on menu

Question

我一直在努力让事件样式在我的 CSS 文件中发挥作用。我查看了我以前设计的使用它的网站，但看不出我在当前网站上做错了什么。我希望菜单将当前正在查看的页面上的文本更改为#FFFFFF。尽管反复尝试，但我没有成功。

HTML:

<div class="wrapper">

<header>
    <div class="logo">
        <a href="#"><img src="Images/Logo.jpg" alt="The Restaurant"></a>
    </div>
    <div class="menu">
        <nav>
            <ul>
                <li><a href="food.html">FOOD</a></li>
                <li><a href="#">WINE</a></li> 
                <li><a href="#">GALLERY</a></li> 
                <li><a href="#">ABOUT US</a></li> 
                <li><a href="#">RESERVATIONS</a></li> 
                <li><a href="#">GIFT VOUCHERS</a></li> 
                <li><a href="contact.html">CONTACT</a></li>
            </ul>
        </nav>
    </div>
</header>

CSS:

        /* ===========================
       ======= CSS Reset ========= 
   =========================== */
    html, body, div, form, fieldset, img, legend, label, li, nav, ul{margin: 0; padding:     0;}
table{border-collapse: collapse; border-spacing: 0;}
th, td{text-align: left; vertical-align: top;}
h1, h2, h3, h4, h5, h6, th, td, caption {font-weight:normal;}
img {border: 0;}
p, h2{margin: 0;}

/* ===========================
   ======= Body style ======== 
   =========================== */
    html{
    background-color: #333333;
}

body{
    width: 100%;
    height: 100%; 
    margin: 0 auto; 
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    letter-spacing: 1.5px;
}

.wrapper{

}

/* ===========================
   ======= Anchor style ====== 
   =========================== */
a {
    text-decoration: none; 
    color: #999999;
}

a img {
    border: 0px; 
    text-decoration: none;}


 /* ===========================
    ========= Header ========== 
    =========================== */
header{
    background-color: #2B2B2B;
    min-width: 100%; 
    margin: 0px 0px 0px 0px;
    float: left;  
    height: 90px; 
}

.logo{
    background-color: #333333;
    height: 60px; 
    padding-left: 150px;    
}

/* ===========================
   ===== Main Navigation ===== 
   =========================== */
.menu{
    background-color: #333333;
}
.menu nav{
    float: left; 
    padding-left: 150px; 
    padding-bottom: 8px; 
    padding-top: 8px;   
}
.menu nav ul{
    list-style: none; 
}
.menu nav ul li{
    display: inline;     
    padding-right: 15px; 
}
.menu nav ul li a{
    padding-top: 5px; 
    padding-bottom: 5px;
}
.menu nav ul li a:hover{
    color: #FFFFFF;
}

Answer 1

jsFiddle

添加类(class).current到你的 css 和 html:

.current {
    color:white;
}

<li><a class="current" href="#">ABOUT US</a></li> 

只要菜单的 html 位于每个页面上，这就可以工作。如果您在通过类似 <!--#include file="includes/menu.html" --> 调用每个页面的 html 文件中使用 1 个菜单那么您需要在每个页面上使用一些 javascript 来添加 .current类到 li对于正在查看的页面