如何在锚链上保持活动状态?

时间:2015-03-12 14:04:25

标签: hyperlink navigation anchor

预览:http://cssdeck.com/labs/w7bzvb5r

点击后是否可以保持导航链接处于活动状态,未选中时是否处于非活动状态?我希望它根据选择的链接更改颜色。例如,鼠标悬停时,它会从黑色变为蓝色。如果它处于活动状态时它如何保持蓝色而在不活动时保持黑色?

1 个答案:

答案 0 :(得分:2)

如果你想要的是以某种风格保持活动页面上的链接文本,那么答案是可能的。

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

#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>的类。

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