CSS - Fantastic Tabs
Introduction
This X/HTML and CSS technique differentiates the current page from others in a navigation bar, using a single stylesheet and no need for any server side code. I like this technique because it's both very simple and very robust, and the basic premise can be used to great effect.
Demonstration
In the iframe below, "Home", "About" and "Contact" are different pages, each sharing the same CSS file. Click the different tabs and note that the current tab remains highlighted during navigation.
Code
This effect relies on one simple trick: each page is identified an id attribute on its body element and each tab is also identified with an id attribute. CSS overrides the default tab styling when a specific tab exists inside a specific body element:
<style type="text/css"> body#home #tab-home a, body#about #tab-about a, body#contact #tab-contact a { color: #000000; background-color: #FFFFFF; } </style>
Credits
I originally read about this technique in the Simplebits notebook.