CODEWITHSUNDEEP
hyperlinknavigationanchor
Mira
Mira

Reputation: 37

How to keep active state on anchor links?

Preview: http://cssdeck.com/labs/w7bzvb5r

Is it possible to keep the navigation link active once clicked and inactive when not selected? I would like it to change color based on which link is selected. For example, on mouse-over it changes from black to blue. How can it stay blue when it is active and black when inactive?

Upvotes: 0

Views: 1386

Answers (1)

Kayla
Kayla

Reputation: 36

If what you are after is to keep the text of the link on the active page in a certain style the answer is it is possible.

There are many ways to approach this. Based on the example provided replacing this:

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

with the following will work:

.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; }

This is using CSS3 selectors referenced here: https://css-tricks.com/almanac/selectors/n/nth-child/

.fp-viewing-firstPage is a class applied to your <body> that changes on navigation.

Setting the id or class on each link is another option.

Upvotes: 2

Related Questions