Highlighting active panel in CSS without JavaScript

Question

I'm building something similar to this - http://www.impressivewebs.com/demo-files/content-switcher/content-switcher.html

I wondered if anyone had any ideas as to how I can show the current panel in the navigation WITHOUT using JavaScript - pure CSS.

I'm fairly confidant it's not possible but I thought I'd ask anyway.

Just to clarify...
You'll notice that when you click a link on this page - http://www.impressivewebs.com/demo-files/content-switcher/content-switcher-javascript.html the link you just clicked on highlights to inform the user which panel they're looking at. That's what I want to do in CSS.

Answer 1

It's possible, believe it or not, it's just really tricky. This should get you started: http://thinkvitamin.com/design/css/how-to-create-a-valid-non-javascript-lightbox/ The key bit is captured in this quote:

I'm sure you are all aware of linking to an an element on the same page with the use of the ID attribute and how it works. However, you may not have known that linking to an element that is hidden off the page causes the element to be "pulled" into view as opposed to the window jumping down to that element.

So basically, you'd put all of your slides off-page and then have the numbered links use anchors to pull those into view. Your use case should be a bit simpler than the one she's doing, since you don't have to dim out the rest of the page.

Answer 2

What you need to do is to put what you need to slide inside a container with fixed size and "overflow" property set to hidden. Then, inside this container, you put your "slidable" contents inside a list of anchor elements with "display" set to block and size the same of the container. If, from a link on the page, you call one of the anchors in the list, the element with the correspondent anchor name will automgically show up.. simple as that.