Question

以下是导航栏的菜单html代码：

<nav>
        <div id="menu">
        <ul>
                <li><a href="index.html">Home Page</a></li>
            <li><a href="history.html">History</a></li>
            <li><a href="events.html">Events</a></li>
            <li><a href="inf.html">Information</a></li>
            <li><a href="photo.html">Photos</a></li>
            <li><a href="contact.html">Contact Us</a></li>
            <li><a href="links.html">Useful Links</a></li>
        </ul>
    </div>
</nav>

这里是css的代码：

 nav{
float: left;
margin-top: 15px;
}

nav ul {
list-style: none;
margin: 0;
padding: 0px 0px 0px 0px;

}

nav li {
display: inline-block;

}

nav a {
padding: 8px 0px;
margin-right:71px;
color: #ffffff;
display: block;
text-decoration: none;
text-transform: capitalize;
font-size: 13px;
}

nav a:hover {
color: #cccccc;
}

例如，如果我正在查看历史页面，那么文本＆＃34;历史记录＆＃34;在导航栏中将是红色的。我怎么能这样做？

@edit：正如评论中所述，我试图避免使用jquery。

Answer 1

只需在活动状态链接中添加class YourClass { loadPerformanceDtos(): ng.IPromise<{}> { this.loadDeferred = this.$q.defer(); var requestedClients: string|string[] = this.$location.search().client; var clientList: string[]; if (!angular.isArray(requestedClients)) { clientList = [requestedClients]; } else { clientList = requestedClients; } clientList.sort(); this.performanceDtoModels = []; this.processChunks(clientList, 10); } processChunks(list: string[], size: number) { var chunk = list.slice(0, size); // Resolve the initial page's progress bar if (this.performanceDtoModels.length > 0) { this.loadDeferred.resolve(); } if (chunk.length > 0) { this.processChunk(chunk).then(() => { this.processChunks(list.slice(size), size); }); } } processChunk(chunk: string[]) { var deferred = this.$q.defer(); if (chunk.length === 0) { deferred.resolve(); } else { this.performanceService.loadPerformanceData(chunk) .success((data: IPerformanceDtoModel[]) => { data.forEach((item) => { this.performanceDtoModels.push(item); }); deferred.resolve(); }); } return deferred.promise; } }类名称。

active

在你的CSS中

<li><a href="index.html">Home Page</a></li>
<li><a href="history.html">History</a></li>
<li><a class="active" href="events.html">Events</a></li>
<li><a href="inf.html">Information</a></li>

Answer 2

对于初学者来说，这是一个很好的资源：W3Schools

该网站上的此页面包含您问题的答案：CSS Text Formating

我的意思并不含糊，但你的问题有点不清楚。

Answer 3

您需要使用jQuery将active类添加到与您所在页面对应的锚标记中。完成后，您可以像a.active {color:red}

那样设置样式

如果这些是单独的HTML页面，您也可以手动将active类应用于该页面的锚标记。

Answer 4

您要描述的CSS属性是CSS选择器。你的CSS将如下，它将针对所有＆＃34;活跃＆＃34; div ID菜单中的hrefs

docker create

如何更改菜单中活动链接的颜色

4 个答案: