Question

I found this example (the “checked” version) and it works:

http://jsfiddle.net/2cTwA/

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/

Answer 1

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>