Intermediate
A hash router for three pages
The page has four sections with data-route values /, /about, /contact and notfound.
Show only the section whose data-route matches the route after # (no hash means /). For an unknown route, show the notfound section.
Give the matching nav link the class active, and update the view whenever the hash changes.
Keep the small click handler at the bottom of the starter: it makes # links work inside Hectal's sandboxed preview.
What Check tests
- With no hash, only the Home section is visible
- Setting the hash to
#/aboutshows only About - Clicking the Contact link shows only Contact
- The Contact link has the class
active, the others don't - An unknown route shows the 404 section
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.