MoreLesson 230Free preview

Active Class

This lesson is part of How To · All levels

Summary

Active class marks the element being selected, such as the navigation menu on an active page. JavaScript usually removes the active class from all items and adds it to the items clicked. In addition to colour, active status should be reflected with air currents so as not to depend solely on visual.

Key points

Save the list of items and then delete the active class from all before adding new ones
Use aria-current='page' to mark the page that is being opened
Give a clear style, such as color, bottom line, or background
Don't rely on color alone; add other visual cues

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.