CSS3-only tabs using the :target selector

The following tab control is implemented using CSS3 only. It works in IE9, Firefox, Chrome, Safari and Opera. IE7 and 8 will show the first tab's content only.

Tab 1

This content appears on tab 1.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia elit nec mi ornare et viverra massa pharetra. Phasellus mollis, massa sed suscipit pharetra, nunc tellus sagittis nunc, et tempus dui lorem a ipsum.

next ➧

Tab 2

This content appears on tab 2.

Fusce ullamcorper orci vel turpis vestibulum eu congue nisl euismod. Maecenas euismod, orci non tempus fermentum, leo metus lacinia lacus, nec ultrices quam ligula ac leo. Quisque tortor neque, vulputate quis ultricies ut, rhoncus mollis metus.

next ➧

Tab 3

This content appears on tab 3.

Sed et diam eu ipsum scelerisque laoreet quis in nibh. Proin sodales augue lectus. Maecenas a lorem a mi congue pharetra. Sed sed risus in nisi venenatis condimentum. Donec ac consectetur arcu. Integer urna neque, rutrum at pretium eu.

next ➧

More information

For further details and code explanations, please please refer to:
How to Create a CSS3-Only Tab Control Using the :target Selector

This example code was developed by Craig Buckler of OptimalWorks.net for SitePoint.com.

Please this code as you wish. A link back to the article is appreciated.