【问题标题】:How to keep active state on anchor links?如何在锚链接上保持活动状态?
【发布时间】:2015-05-14 17:40:20
【问题描述】:

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

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

【问题讨论】:

标签: hyperlink navigation anchor


【解决方案1】:

如果您想要将活动页面上的链接文本保持为某种样式,那么答案是有可能的。

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

#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 或类是另一种选择。

【讨论】:

  • 谢谢!这正是我想要的。我正在使用我找到的模板,所以我不太熟悉其中的所有内容是如何工作的。 :)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-03-09
  • 2014-10-24
  • 1970-01-01
  • 2018-09-04
相关资源
最近更新 更多