I found this example (the "checked" version) and it works:
But I want to wrap the input and labels inside a container element (like nav
), and if I do that the tabs stop working :(
Is there any solution for this?
found solution: http://jsfiddle.net/2cTwA/7/
With a slight HTML and CSS modification - DEMO
CSS
input { display: none; }
nav { overflow: hidden }
label { float: left; display: inline-block; padding: 5px 10px; }
label a { color: #d33; text-decoration: underline; cursor: pointer; }
.tab { display: none; border: 1px solid #333; padding: 10px; }
a[name="tab1"] + .tab { display: block }
:target + .tab { display: block }
:target ~ a[name="tab1"] + .tab { display: none }
HTML
<section class="tab-area tabs-checked">
<nav>
<input checked type="radio" name="tab" id="tab-A" />
<input type="radio" name="tab" id="tab-B" />
<input type="radio" name="tab" id="tab-C" />
<label class="tab-link" for="tab-A"><a href="#tab1">Tab 1</a></label>
<label class="tab-link" for="tab-B"><a href="#tab2">Tab 2</a></label>
<label class="tab-link" for="tab-C"><a href="#tab3">Tab 3</a></label>
</nav>
<a name="tab3"></a>
<article class="tab">
<h3>Tab 3</h3>
</article>
<a name="tab2"></a>
<article class="tab">
<h3>Tab 2</h3>
</article>
<a name="tab1"></a>
<article class="tab">
<h3>Tab 1.</h3>
</article>
</section>