Question

我一直在努力让活跃的样式在我的CSS文件中运行。我看过我设计的以前网站使用它，但在我当前的网站上看不出我做错了什么。我想要菜单将当前正在查看的页面上的文本更改为#FFFFFF。 Depsite重复尝试我没有成功。

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

：主动选择器用于选择和设置活动链接的样式。

单击链接后，链接将变为活动状态。

它的工作看起来

HERE

a:active
{ 
background-color:yellow;
}

Answer 2

jsFiddle

将类.current添加到您的css和html：

.current {
    color:white;
}

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

只要菜单的html在每个页面上，这都会有效。如果您在html文件中使用1个菜单，通过类似之类的内容调用每个页面，那么您需要在每个页面上使用一些javascript将.current类添加到{{1}正在查看的页面

Answer 3

我认为您误解了:active伪类的用法。

用于在用户主动选择内容时提供反馈。例如，如果您有css a:active { color: #fff; }，当用户点击链接时，链接的颜色将变为白色，直到用户释放鼠标按钮。

您尝试做的事情似乎是您在javascript或服务器呈现页面时会做的事情。

使用javascript，您将回复用户点击的内容。例如：

document.querySelectorAll('nav li').addEventListener('click', function(){
   //Add class or style to show the item is selected and remove from other nav items 
});

如果服务器正在呈现它，您可以轻松地让服务器为其正在呈现的页面的导航项添加类或样式。

Answer 4

我已经看到了以下注意事项：需要积极的事情：悬停才能生效。

尝试

a:hover,a:active
{
/* stuff */
}

Answer 5

你应该使用：focus代替：active。如上所述：活动在点击

Answer 6

a:active只有当您点击链接时才会更改颜色，只要您将鼠标释放回来，就可以更改所选网站上需要添加"active"类或类似内容的颜色这和它的风格。

无法获得：激活在菜单上工作

6 个答案: