4 Methods CSS3 Tabbed Content

:focus :hover :target :checked tabs created by Ian Hansson (@teapoted)

Nothing on here is heavily tested, it is simply a Tech Demo, I would not recommend any of it being used in production.

Conclusion: They're an enormous pain. But the checkbox one is the best by far

Tab 1 Tab 2 Tab 3

Tab 3

Lorem Ipsum Dolor Sit

Tab 2

Lorem Ipsum Dolor Sit

This one is pretty rubbish. :focus isn't easy to work with as you can't set defaults and it loses focus from anything.

Focus Tabs

Non-Independent, No Default Selected

Works In: Chrome(latest), Opera(Latest), FireFox(Latest), IE9

Tab 1 Tab 2 Tab 3

Tab 3

Lorem Ipsum Dolor Sit

Tab 2

Lorem Ipsum Dolor Sit

I really just made this so I could say I have 4 instead of 3. Although hover can be used for more than you'd think, it's very impractical.

Hover Tabs

Non-Independent, No Default Selected

Works In: Chrome(latest), Opera(Latest), FireFox(Latest), IE9

Tab 1 Tab 2 Tab 3

:target is the most common selector for odd css demos. However you get a jump when you click an anchor, I've fixed that here.

Tab 2

Lorem Ipsum Dolor Sit

Tab 3

Lorem Ipsum Dolor Sit

Target Tabs

Non-Independent, Default Selected

Works In: Chrome(latest), Opera(Latest), FireFox(Latest), IE9

I love :checked. :checked is great. If only I could toggle any item and not just input elements we'd be golden.

Tab 2

Lorem Ipsum Dolor Sit

Tab 3

Lorem Ipsum Dolor Sit

Checked Tabs

Independent, Default Selected

Works In: Chrome(latest), Opera(Latest), FireFox(Latest), IE9