XForms/Horizontal File Tab Menu Highlighted

Motivation
Complex web forms frequently break tasks up into multiple views that can be navigated by the user. These views are access by a set of "file tabs" at the top of a screen. But the user needs feedback on which tab is the current tab and we would like to do this without resorting to complex JavaScript.

Approach: Use the CSS-3  pseudo element
This example uses the CSS-3 :target pseudo element to highlight the selected tab. This tag is associated with the part of a web page that is specified by the label. For example you can append a label to a URL like the following:

Note: This works only in CSS-3 and will not work under IE-6.

Note that this example is very similar to the prior example but it uses a HTML anchor instead of a trigger.

Discussion
The selected file-tab should highlight in a light gray. The other menus should be in a dark gray and appear to be more in the background. The content associated with each tab should be visible.

Note that if you want the first tab to highlight on page load, you must use the #tab1 in the URL.

Possible areas for improvement
Although this "hack" works and it does get rid of some commonly occurring JavaScript, it is still lacking in several ways.


 * 1) You can only have a single selected tab on a page.
 * 2) There is no way to highlight the initial tab without adding the label in the URL
 * 3) The label gets stuck in the URL and makes things like bookmarking problematic

Ideally XForms would include a  pseudo element that would allow you to apply a different style to a selected item within a group. Perhaps someone will do this as a custom control to FireFox.

I should also note I have tried to add a class to the tab1 div called "selected" and added it to the CSS to select it initially, but then it does not unselect when I select a different tab. I can't find an easy way to dynamically add or remove a class to an element in the body of an XForm. There does not appear to be a  command. Perhaps that will be added to future version of the XForms specification.

Other Examples
The following example shows how tab elements can be stored within a model: Kurt Cagle Tab Example