CSS-Tricks Example

Example One

Grade: C

From an HTML perspective, this is the absolute cleanest. It just doesn't deal with current navigation highlighting.

Example Three

Grade: B

This has current navigation highlighting. The only downside is that it requires as many wrapping divs as there are panels.

Example Five

Grade: B

This is handles current navigation highlighting, with pretty clean HTML. The only downside is that the list for the tab navigation comes after the panels.

Example Seven

Grade: Depends

This example is the only one that works in IE 7+, so that's big bonus points.

Example Two

Grade: D

This fixes the current navigation problem, but requires the menu to be repeated inside of each panel, which is pretty unacceptable. The hash-links also jump to the panel themselves, which cuts off the actual tabs if there is enough page scroll below the panels.

Example Four

Grade: F

This was an attempt at using the :active and :focus states instead of using :target. This would have made it even IE 6 compatible. It works as you click, but I haven't been able to get the link to keep it's focus or active state after the click. Plus, all the content is inside the anchor link which is sketchy at best.

Example Six

Grade: A

This is the winner so far. It is infinitely expandable (no selectors specific to panels) and the markup is pretty clean. Possible issues: cross-browser line height issues possibly not making perfect layout, links are placed right above each div instead of a in central list at the top.