Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
7. Highlighted Tabs
Knowing where you are is always important when navigating the Web, but if you’re using an external file to keep the header of your site consistent from page to page, how can you tell it to highlight the tab for the page in which it is currently inserted? You could always resort to some messy JavaScript to identify the page and then set the style for that menu link, but try this instead: Add a unique ID to the <body> tag for each page (for example, id="consultingPage"), another unique ID for each of the menu options (for example, id="consultingMenu"), and then add a contextual definition for the normal link states for how the links should be highlighted (#consultingPage #consultingMenu{...}) in your global CSS.
On the Home page, the Home menu link is highlighted.
)
Using the exact same code for the menu, the Consulting menu option is highlighted only when the consulting page is loaded.
)
EXAMPLE: