css - Is it possible to have tabs without javascript

Question

I'm trying to have a box with tabs, and have found many tutorials on how it's done with javascript to switch between the tabs. Is there anyway to have tabs without javascript?

Answer 1

EDIT: As of 2020 this technique still works and allows tabs to be linked to, but if you are looking for multiple tabsets on one page, see @chulian's answer which uses input[type=radio] instead of :target.

There is an archive of the now-dead html5rockstars.com demo here: https://web.archive.org/web/20121118201357/http://htmlrockstars.com/blog/using-css-to-create-a-tabbed-content-area-no-js-required/

The same technique is covered, arguably better, here: http://www.sitepoint.com/css3-tabs-using-target-selector/

What it boils down to is that you use the CSS3 :target selector to unhide whichever tab is currently selected. This will only work if there is only one set of tabs on the page, but has the advantage of complete browser back button support. For example:

<ul id="menu">
    <li><a href="#tab1">First tab</a></li>
    <li><a href="#tab2">Second tab</a></li>
    <li><a href="#tab3">Third tab</a></li>
</ul>
<div id="tab1" class="tab-content">Content of first tab</div>
<div id="tab2" class="tab-content">Content of second tab</div>
<div id="tab3" class="tab-content">Content of third tab</div>

And then in your stylesheet:

.tab-content {
    display: none;
}
.tab-content:target {
    display: block;
}

Unfortunately this isn't perfect, as no tab content will show up until one of the links is clicked (unless you link to page.html#tab1). The second link above suggests something like the following as a solution to that issue:

.tab-content {
    z-index: 0;
    background-color: white;
    position: absolute;
    top: 100px;
    width: 100%;
    height: 300px;
}
.tab-content:first-child {
    z-index: 1;
}
.tab-content:target {
    z-index: 2;
}

This is somewhat hackish, and also requires absolute positioning.

As an alternative, if you do not mind having your default tab be last in the html (you can order the links however you like, of course), you could do this:

<ul id="menu">
    <li><a href="#tab1">First tab</a></li>
    <li><a href="#tab2">Second tab</a></li>
    <li><a href="#tab3">Third tab</a></li>
</ul>
    <div class="tab-folder">
    <div id="tab2" class="tab-content">Content of second tab</div>
    <div id="tab3" class="tab-content">Content of third tab</div>
    <div id="tab1" class="tab-content">Content of first tab</div>
</div>

CSS:

.tab-folder > .tab-content:target ~ .tab-content:last-child, .tab-folder > .tab-content {
    display: none;
}
.tab-folder > :last-child, .tab-folder > .tab-content:target {
    display: block;
}

This is arguably the cleanest solution and the one that I would choose over the others, unless I suspected that many people would be visiting my page with CSS turned off.