如何保持锚链接的活动状态？

Question

是否可以在单击后保持导航 link 处于活动状态，而在未选择时保持不活动状态？我希望它根据选择 link 来改变颜色。例如，在鼠标悬停时它会从黑色变为蓝色。怎么能在激活时保持蓝色，不激活时保持黑色？

Answer 1

如果您想要以某种样式保留活动页面上 link 的文本，那么答案是可行的。

有很多方法可以解决这个问题。根据提供的示例替换此：

#firstPage { color: #eee; }
#firstPage/slide2 { color: #ddd; }
#firstPage/slide3 { color: #aaa; }
#firstPage/slide4 { color: #ccc; }

以下将起作用：

.fp-viewing-firstPage nav#main a:nth-child(1) { color: #eee; }
.fp-viewing-firstPage-slide2 nav#main a:nth-child(2) { color: #ddd; }
.fp-viewing-firstPage-slide3 nav#main a:nth-child(3) { color: #aaa; }
.fp-viewing-firstPage-slide4 nav#main a:nth-child(4) { color: #ccc; }

这是使用此处引用的 CSS3 选择器：https://css-tricks.com/almanac/selectors/n/nth-child/

.fp-viewing-firstPage 是应用于您的 <body> 的 class，它在导航时会发生变化。

在每个 link 上设置 id 或 class 是另一种选择。

如何保持锚链接的活动状态？

How to keep active state on anchor links?

navigation

anchor

hyperlink