How do I style link menus for filtering like the 'Dean + Friends' 'Just Dean' 'Just Friends' one on Facebook?

Question

Several pages on our e-commerce web app allow users to filter a status list of requests they've submitted to us.

The filters are usually something like:

All Pending Completed

We have them set up as links. We'd like to style them so that the currently active filter is highlighted with a colored rectangle (w/rounded corners, natch!) and the text becomes white.

The rectangular highlight would remain until the user clicked one of the other filters (Pending, Completed) at which point the highlight would move to the link just clicked.

An example of this shows up in several places on Facebook where, for example, wall posts are filtered into:

Dean+Friends Just Dean Just Friends

Is there a straightforward way to do this in CSS, perhaps by styling the most-recently 'visited' link but marking previously-visited ones as unvisited?

Thanks,

Dean Richardson

Answer 1

Is there a straightforward way to do this in CSS, perhaps by styling the most-recently 'visited' link but marking previously-visited ones as unvisited?

You can't produce the dynamics of this effect with pure CSS. Facebook does it by adding a CSS class with Javascript that fires when you click one of the pill-tab buttons. The CSS class contains style rules that make it appear in the desired manner.